jQuery에 테이블 행 추가

StackOverflow https://stackoverflow.com/questions/171027

  •  05-07-2019
  •  | 
  •  

문제

테이블에 추가 행을 마지막 행으로 추가하는 jQuery에서 가장 좋은 방법은 무엇입니까?

이것이 허용됩니까?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

이와 같은 테이블에 추가할 수 있는 항목(예: 입력, 선택, 행 수)에 제한이 있습니까?

도움이 되었습니까?

해결책

당신이 제안한 접근법은 당신이 찾고있는 결과를 제공 할 수 없습니다. tbody 예를 들어:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

다음은 다음과 같습니다.

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

따라서 대신이 접근법을 권장합니다.

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

당신은 내에 무엇이든 포함 할 수 있습니다 after() 위의 예에 따라 여러 행을 포함하여 유효한 HTML 인 한 방법.

업데이트: 이 질문으로 최근 활동에 이어이 답변을 다시 방문합니다. 눈이없는 것은 항상 tbody 돔에서; 이것은 사실이지만 적어도 하나의 행이있는 경우에만 가능합니다. 줄이 없다면 tbody 직접 지정하지 않는 한.

DARKON_ 제안 에 추가 tbody 마지막 후에 콘텐츠를 추가하는 대신 tr. 이것은 행이없는 문제를 해결하지만 이론적으로 여러 가지 가질 수있는 것처럼 방탄이 아닙니다. tbody 요소와 행은 각각에 추가됩니다.

모든 것을 평가하면 가능한 모든 단일 시나리오를 설명하는 단일 라인 솔루션이 있는지 잘 모르겠습니다. jQuery 코드가 마크 업으로 키가 큰지 확인해야합니다.

가장 안전한 해결책은 아마도 당신의 table 항상 하나 이상을 포함합니다 tbody 줄이 없더라도 마크 업에서. 이를 바탕으로 여러 행을 사용하는 다음을 사용할 수 있습니다. tbody 집단):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

다른 팁

JQuery에는 DOM 요소를 즉시 조작 할 수있는 내장 시설이 있습니다.

다음과 같이 테이블에 무엇이든 추가 할 수 있습니다.

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

그만큼 $('<some-tag>') jQuery의 물건은 여러 가지를 가질 수있는 태그 개체입니다. attr 설정하고 얻을 수있는 속성뿐만 아니라 text, 여기에서 태그 사이의 텍스트를 나타냅니다. <tag>text</tag>.

이것은 꽤 이상한 들여 쓰기이지만이 예에서 무슨 일이 일어나고 있는지 알기가 더 쉽습니다.

그래서 그 이후로 상황이 바뀌 었습니다 @Luke Bennett 이 질문에 대답했습니다. 다음은 업데이트입니다.

jQuery 버전 1.4 (?) 이후 삽입하려는 요소가 자동으로 감지합니다 ( append(), prepend(), before(), 또는 after() 방법)은 a입니다 <tr> 첫 번째에 삽입합니다 <tbody> 당신의 테이블에서 또는 그것을 새로운 것으로 감싸십시오 <tbody> 존재하지 않는 경우.

예, 예제 코드는 허용되며 jQuery 1.4+에서 잘 작동합니다. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

만약 당신이 있다면 <tbody> 그리고 a <tfoot>?

와 같은:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

그런 다음 바닥 글에 새 행을 삽입합니다.

따라서 최상의 솔루션은 a를 포함하는 것입니다 <tbody> 태그와 사용 .append,보다는 .after.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

나는 당신이 jQuery 메소드를 요청했다는 것을 알고 있습니다.나는 많은 것을 보았고 다음 함수를 통해 JavaScript를 직접 사용하는 것보다 더 나은 방법으로 이를 수행할 수 있다는 것을 알았습니다.

tableObject.insertRow(index)

index 삽입할 행의 위치를 ​​지정하는 정수입니다(0부터 시작).-1 값을 사용할 수도 있습니다.결과적으로 새 행이 마지막 위치에 삽입됩니다.

이 매개변수는 Firefox 및 오페라, 그러나 Internet Explorer에서는 선택 사항입니다. 크롬 그리고 원정 여행.

이 매개변수를 생략하면 insertRow() Internet Explorer의 마지막 위치와 Chrome 및 Safari의 첫 번째 위치에 새 행을 삽입합니다.

HTML 테이블의 허용 가능한 모든 구조에서 작동합니다.

다음 예에서는 마지막에 행을 삽입합니다(-1이 인덱스로 사용됨).

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

도움이 되었으면 좋겠습니다.

추천합니다

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

반대로 

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

그만큼 first 그리고 last 키워드는 첫 번째 또는 마지막 태그에서 작동하여 닫히지 않고 시작됩니다. 따라서 중첩 테이블이 변경되기를 원하지 않고 전체 테이블에 추가하면 중첩 테이블로 더 좋습니다. 적어도 이것은 내가 찾은 것입니다.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

제 생각에는 가장 빠르고 명확한 방법은입니다

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

여기 데모가 있습니다 깡깡이

또한 더 많은 HTML 변경을 위해 작은 기능을 권장 할 수 있습니다.

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

내 문자열 작곡가를 사용하면처럼 할 수 있습니다.

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

여기 데모가 있습니다깡깡이

이것은 jQuery의 "Last ()"함수를 사용하여 쉽게 수행 할 수 있습니다.

$("#tableId").last().append("<tr><td>New row</td></tr>");

테이블에 행이없고 각 행이 상당히 복잡 할 때이 방식을 사용하고 있습니다.

style.css :

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

여기에 게시 된 최상의 솔루션의 경우 마지막 행에 중첩 테이블이있는 경우 새 행이 메인 테이블 대신 중첩 테이블에 추가됩니다. 빠른 솔루션 (tbody가 있거나없는 테이블과 테이블이없는 테이블을 고려) :

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

사용 예 :

add_new_row('#myTable','<tr><td>my new row</td></tr>');

클릭 한 행 후 테이블 행을 삽입하려고하는 몇 가지 관련 문제가있었습니다. .after () 호출이 마지막 행에 대해 작동하지 않는 것을 제외하고는 모두 괜찮습니다.

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

나는 매우 어수선한 해결책을 찾았습니다.

다음과 같이 테이블을 만듭니다 (각 행에 대한 ID) :

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

등 ...

그리고 :

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

나는 이것을 이런 식으로 해결했다.

jQuery 사용

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

단편

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>

당신은 이것을 잘 사용할 수 있습니다 jQuery는 테이블 행을 추가합니다 기능. 테이블과 잘 작동합니다 <tbody> 그리고 그것은 그렇지 않습니다. 또한 마지막 테이블 행의 Colspan을 고려합니다.

예제 사용법은 다음과 같습니다.

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

내 해결책 :

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

용법:

$('#Table').addNewRow(id1);

    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);

닐의 대답 지금까지 최고의 것입니다. 그러나 상황이 정말로 빨리 지어집니다. 내 제안은 변수를 사용하여 요소를 저장하고 DOM 계층에 추가하는 것입니다.

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

자바 스크립트

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

JavaScript 기능으로 작성하십시오

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

나는 이것을 찾았다 Addrow 플러그인 테이블 행을 관리하는 데 매우 유용합니다. 그래도 루크 해결책 새 행을 추가 해야하는 경우 가장 적합합니다.

다음은 해킹 해킹 코드입니다. 나는 행 템플릿을 유지하고 싶었다 HTML 페이지. 테이블 행 0 ... n은 요청 시간에 렌더링 되며이 예제에는 하나의 하드 코드 행과 단순화 된 템플릿 행이 있습니다. 템플릿 테이블이 숨겨져 있으며 행 태그는 유효한 테이블 내에 있어야합니다. 그렇지 않으면 브라우저가 돔 나무. 행을 추가하면 Counter+1 식별자가 사용되며 현재 값은 데이터 속성에 유지됩니다. 각 행이 독특 해지도록 보장합니다 URL 매개 변수.

Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera,에서 테스트를 실행했습니다. 노키아 루미아 800, 노키아 C7 (와 함께 증상 3), 안드로이드 스톡 및 파이어 폭스 베타 브라우저.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

추신 : jQuery 팀에 모든 크레딧을 제공합니다. 그들은 모든 것을받을 자격이 있습니다. jQuery가없는 JavaScript 프로그래밍 - 나는 그 악몽에 대해 생각하고 싶지도 않습니다.

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

나는 내 프로젝트에서 한 것 같아요. 여기에 있습니다.

HTML

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

JS

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});

이것은 내 해결책입니다

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

내가 또한 마침내 행이나 특정 장소에 행을 추가하는 방법을 얻었으므로 이것을 공유해야한다고 생각합니다.

먼저 길이 또는 행을 찾으십시오.

var r=$("#content_table").length;

그런 다음 아래 코드를 사용하여 행을 추가하십시오.

$("#table_id").eq(r-1).after(row_html);

주제에 대한 좋은 예를 추가하려면 특정 위치에 행을 추가 해야하는 경우 작동 솔루션이 있습니다.

여분의 행은 5 행 후 또는 5 행 미만의 경우 테이블 끝에 추가됩니다.

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

컨텐츠를 테이블 아래에 준비된 (숨겨진) 컨테이너에 넣습니다. 그래서 당신 (또는 디자이너)을 변경해야한다면 JS를 편집 할 필요가 없습니다.

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

바닥 글을 캐시하고 DOM에 대한 액세스를 줄일 수 있습니다 (참고 : 바닥 글 대신 가짜 행을 사용하는 것이 좋습니다).

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

다른 변수가있는 경우 액세스 할 수 있습니다 <td> 그와 같은 태그.

이렇게하면 도움이되기를 바랍니다

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

새 행을 추가합니다 첫 번째 TBODY 테이블의 의존없이 THEAD 또는 TFOOT 현재. (나는 어떤 버전의 jQuery에서 정보를 찾지 못했습니다. .append() 이 행동이 존재합니다.)

이 예에서 시도해 볼 수 있습니다.

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

어떤 예에서 a b 행이 삽입됩니다 1 2, 후에 3 4 두 번째 예에서. 테이블이 비어 있으면 jQuery가 생성됩니다 TBODY 새 행을 위해.

DataTable JQuery 플러그인을 사용하는 경우 시도해 볼 수 있습니다.

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

Datatables fnadddata를 참조하십시오 DataTables API

간단한 방법으로 :

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

추가하려면 row 전에 <tr> 첫 아이.

$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

추가하려면 row 후 <tr> 막내.

$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top