Thêm hàng bảng trong jQuery

Phương thức tốt nhất trong jQuery để thêm một hàng bổ sung vào bảng làm hàng cuối cùng là gì?

điều này có chấp nhận được không?

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

Có giới hạn nào đối với những gì bạn có thể thêm vào một bảng như thế này (chẳng hạn như đầu vào, chọn, số lượng hàng) không?

Cách tiếp cận mà bạn đề xuất không được đảm bảo để cung cấp cho bạn kết quả mà bạn đang tìm kiếm - nếu bạn có một tbodyví dụ:

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

Bạn sẽ kết thúc với những điều sau đây:

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

Do đó, tôi muốn giới thiệu phương pháp này thay thế:

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

Bạn có thể bao gồm mọi thứ trong after()phương thức miễn là HTML hợp lệ, bao gồm nhiều hàng theo ví dụ trên.

Cập nhật: Xem lại câu trả lời này sau hoạt động gần đây với câu hỏi này. mí mắt làm cho một nhận xét tốt rằng sẽ luôn luôn có một tbodyDOM; Điều này đúng, nhưng chỉ khi có ít nhất một hàng. Nếu bạn không có hàng, sẽ không có hàng tbodytrừ khi bạn tự chỉ định một hàng.

DaRKoN_ đề nghị nối thêm vào tbodythay vì thêm nội dung sau lần cuối tr. Điều này xoay quanh vấn đề không có hàng, nhưng vẫn không chống đạn vì về mặt lý thuyết bạn có thể có nhiều tbodyyếu tố và hàng sẽ được thêm vào mỗi hàng.

Cân nhắc mọi thứ, tôi không chắc có một giải pháp một dòng duy nhất cho mọi tình huống có thể xảy ra. Bạn sẽ cần đảm bảo các mã số jQuery với đánh dấu của bạn.

Tôi nghĩ rằng giải pháp an toàn nhất có lẽ là đảm bảo bạn tableluôn bao gồm ít nhất một tbodytrong đánh dấu của bạn, ngay cả khi nó không có hàng. Trên cơ sở này, bạn có thể sử dụng các mục sau sẽ hoạt động theo nhiều hàng bạn có (và cũng chiếm nhiều tbodyyếu tố):

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

jQuery có một tiện ích tích hợp sẵn để thao tác các phần tử DOM một cách nhanh chóng.

Bạn có thể thêm bất cứ điều gì vào bảng của bạn như thế này:

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

Các $('<some-tag>')điều trong jQuery là một đối tượng thẻ mà có thể có một vài attrthuộc tính có thể được thiết lập và nhận được, cũng như text, đại diện cho văn bản giữa các thẻ ở đây: <tag>text</tag>.

Đây là một số thụt lề khá kỳ lạ, nhưng bạn sẽ dễ dàng thấy những gì đang diễn ra trong ví dụ này.

Vì vậy, mọi thứ đã thay đổi kể từ khi @Luke Bennett trả lời câu hỏi này. Đây là một bản cập nhật.

jQuery kể từ phiên bản 1.4 (?) tự động phát hiện nếu các yếu tố bạn đang cố gắng để chèn (sử dụng bất kỳ append(), prepend(), before(), hoặc after()phương pháp) là một <tr>và chèn nó vào đầu tiên <tbody>trong bảng của bạn hoặc kết thúc tốt đẹp nó thành một mới <tbody>nếu người ta không làm hiện hữu.

Vì vậy, có mã ví dụ của bạn được chấp nhận và sẽ hoạt động tốt với jQuery 1.4+. ;)

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

Điều gì nếu bạn có một <tbody>và một <tfoot>?

Nhu la:

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

Sau đó, nó sẽ chèn hàng mới của bạn vào phần chân trang - không phải cho phần thân.

Do đó, giải pháp tốt nhất là bao gồm một <tbody>thẻ và sử dụng .append, chứ không phải .after.

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

Tôi biết bạn đã yêu cầu một phương thức jQuery. Tôi đã xem xét rất nhiều và thấy rằng chúng ta có thể làm điều đó theo cách tốt hơn là sử dụng JavaScript trực tiếp bằng chức năng sau.

tableObject.insertRow(index)

indexlà một số nguyên chỉ định vị trí của hàng cần chèn (bắt đầu từ 0). Giá trị -1 cũng có thể được sử dụng; kết quả là hàng mới sẽ được chèn vào vị trí cuối cùng.

Tham số này là bắt buộc trong Firefox và Opera , nhưng nó là tùy chọn trong Internet Explorer, Chrome và Safari .

Nếu tham số này bị bỏ qua, hãy insertRow()chèn một hàng mới ở vị trí cuối cùng trong Internet Explorer và ở vị trí đầu tiên trong Chrome và Safari.

Nó sẽ hoạt động cho mọi cấu trúc có thể chấp nhận của bảng HTML.

Ví dụ sau sẽ chèn một hàng cuối cùng (-1 được sử dụng làm chỉ mục):

<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>

Tôi hy vọng nó sẽ giúp.

Tôi đề nghị

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

như trái ngược với

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

Các từ khóa firstvà lasthoạt động trên thẻ đầu tiên hoặc cuối cùng được bắt đầu, không bị đóng. Do đó, cái này chơi đẹp hơn với các bảng lồng nhau, nếu bạn không muốn thay đổi bảng lồng nhau, mà thay vào đó hãy thêm vào bảng tổng thể. Ít nhất, đây là những gì tôi tìm thấy.

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

Theo tôi cách nhanh nhất và rõ ràng là

//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>');

đây là bản demo Fiddle

Ngoài ra tôi có thể đề xuất một hàm nhỏ để thực hiện nhiều thay đổi html hơn

//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] : '';
        });
    }
}());

Nếu bạn sử dụng trình soạn thảo chuỗi của tôi, bạn có thể làm điều này như

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'
}));

Dưới đây là bản demo Fiddle

Điều này có thể được thực hiện dễ dàng bằng cách sử dụng hàm "last ()" của jQuery.

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

Tôi đang sử dụng cách này khi không có bất kỳ hàng nào trong bảng, cũng như, mỗi hàng khá phức tạp.

style.css:

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

xxx.html

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

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

...

Đối với giải pháp tốt nhất được đăng ở đây, nếu có một bảng lồng trên hàng cuối cùng, hàng mới sẽ được thêm vào bảng lồng thay vì bảng chính. Một giải pháp nhanh chóng (xem xét các bảng có / không có tbody và các bảng có các bảng lồng nhau):

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);
    }
}

Ví dụ sử dụng:

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

Tôi đã giải quyết nó theo cách này.

Sử dụng jquery

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

Đoạn trích

$('#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>

Tôi đã gặp một số vấn đề liên quan, cố gắng chèn một hàng của bảng sau khi hàng được nhấp. Tất cả đều ổn ngoại trừ lệnh .after () không hoạt động cho hàng cuối cùng.

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

Tôi đã đáp ứng với một giải pháp rất gọn gàng:

tạo bảng như sau (id cho mỗi hàng):

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

Vân vân ...

và sau đó :

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

Bạn có thể sử dụng hàm jQuery thêm bảng tuyệt vời này . Nó hoạt động tuyệt vời với các bảng có <tbody>và không. Ngoài ra, cần phải xem xét colspan của hàng cuối bảng của bạn.

Dưới đây là một ví dụ sử dụng:

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

Giải pháp của tôi:

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

sử dụng:

$('#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);

Câu trả lời của Neil là câu trả lời hay nhất. Tuy nhiên mọi thứ trở nên lộn xộn rất nhanh. Đề xuất của tôi sẽ là sử dụng các biến để lưu trữ các phần tử và nối chúng vào hệ thống phân cấp DOM.

HTML

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

JAVASCRIPT

// 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>

Viết với chức năng javascript

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

Tôi thấy plugin AddRow này khá hữu ích để quản lý các hàng của bảng. Mặc dù vậy, giải pháp của Luke sẽ phù hợp nhất nếu bạn chỉ cần thêm một hàng mới.

Dưới đây là một số mã hack hqueti. Tôi muốn duy trì một mẫu hàng trong một trang HTML . Các hàng của bảng 0 ... n được hiển thị tại thời điểm yêu cầu và ví dụ này có một hàng được mã hóa cứng và một hàng mẫu được đơn giản hóa. Bảng mẫu bị ẩn và thẻ hàng phải nằm trong một bảng hợp lệ hoặc các trình duyệt có thể thả nó khỏi cây DOM . Thêm một hàng sử dụng bộ nhận dạng bộ đếm + 1 và giá trị hiện tại được duy trì trong thuộc tính dữ liệu. Nó đảm bảo mỗi hàng có các tham số URL duy nhất .

Tôi đã chạy thử nghiệm trên Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800 , Nokia C7 (với Symbian 3), chứng khoán Android và trình duyệt Firefox beta.

<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();
}

PS: Tôi cung cấp tất cả các khoản tín dụng cho nhóm jQuery; họ xứng đáng với mọi thứ Lập trình JavaScript mà không có jQuery - Tôi thậm chí không muốn nghĩ về cơn ác mộng đó.

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

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

Tôi đoán tôi đã thực hiện trong dự án của mình, đây là:

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');
    });
      });
});

Đây là giải pháp của tôi

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

nếu bạn có một biến khác, bạn có thể truy cập vào <td>thẻ như thế.

Bằng cách này tôi hy vọng nó sẽ hữu ích

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);

Vì tôi cũng đã có một cách quá thêm hàng cuối cùng hoặc bất kỳ địa điểm cụ thể nào nên tôi nghĩ tôi cũng nên chia sẻ điều này:

Đầu tiên tìm ra chiều dài hoặc hàng:

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

và sau đó sử dụng mã dưới đây để thêm hàng của bạn:

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

Để thêm một ví dụ tốt về chủ đề, đây là giải pháp làm việc nếu bạn cần thêm một hàng ở vị trí cụ thể.

Hàng bổ sung được thêm sau hàng thứ 5 hoặc ở cuối bảng nếu có ít hơn 5 hàng.

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);
}

Tôi đặt nội dung trên một thùng chứa sẵn sàng (ẩn) bên dưới bảng .. vì vậy nếu bạn (hoặc nhà thiết kế) phải thay đổi thì không bắt buộc phải chỉnh sửa 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>

Bạn có thể lưu trữ bộ đệm chân trang và giảm quyền truy cập vào DOM (Lưu ý: có thể tốt hơn là sử dụng hàng giả thay vì chân trang).

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

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

sẽ thêm một hàng mới vào đầu tiên TBODY của bảng, mà không phụ thuộc vào bất kỳ THEADhoặc TFOOThiện tại. (Tôi không tìm thấy thông tin từ phiên bản jQuery nào có .append()hành vi này.)

Bạn có thể thử nó trong các ví dụ sau:

<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>

Trong đó a bhàng mẫu được chèn sau 1 2, không phải sau 3 4ví dụ thứ hai. Nếu bảng trống, jQuery tạo TBODYcho một hàng mới.

Nếu bạn đang sử dụng plugin Datable JQuery, bạn có thể thử.

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);

Tham khảo API dữ liệu fnAddData Datatables

Một cách đơn giản:

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

Hãy thử điều này: cách rất đơn giản

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>