javascript 动态表格 在jQuery中添加表行

这可以使用jQuery的“last（）”函数轻松完成。

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

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

您可以缓存页脚变量并减少对DOM的访问（注意：使用假行而不是页脚可能会更好）。

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

以一种简单的方式：

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

如果要在<tr>第一个子项之前添加row 。

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

如果要在<tr>最后一个子项后添加row 。

$("#myTable > tbody").append("<tr><td>my data</td><td>more data</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);

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

要在主题上添加一个很好的示例，如果您需要在特定位置添加行，这里是可行的解决方案。

额外的行在第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>

如果你有<tbody>和<tfoot>怎么办？

如：

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

然后它会在页脚中插入新行 - 而不是身体。

因此，最好的解决方案是包含<tbody>标签并使用.append ，而不是.after 。

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

您可以使用这个伟大的jQuery添加表行功能。 它适用于具有<tbody>但没有的表。 此外，它还考虑了您上一个表行的colspan。

以下是一个示例用法：

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

在我看来，最快捷，最明确的方式是

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

这里是演示Fiddle

此外，我可以推荐一个小函数来进行更多的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'
}));

这是演示Fiddle

因为我也有一个方法在最后或任何特定的地方添加行所以我想我也应该分享这个：

首先找出长度或行：

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

然后使用下面的代码添加你的行：

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

对于此处发布的最佳解决方案，如果最后一行有嵌套表，则新行将添加到嵌套表而不是主表。 一个快速的解决方案（考虑带有/不带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>');

我猜我已经完成了我的项目，这里是：

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

我用这种方式解决了它，我认为是最可读的:)

$('#tab').append($('<tr>')
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
    .append($('<td>').append("text"))
  )

尼尔的答案是迄今为止最好的答案 。 然而事情变得非常混乱。 我的建议是使用变量来存储元素并将它们附加到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);

您建议的方法无法保证为您提供您正在寻找的结果 - 例如，如果您有一个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，包括上面示例中的多行。

更新：在此问题的最近活动之后重新审视此答案。 eyelidless是一个很好的评论，在DOM中总会有一个tbody ; 这是事实，但前提是至少有一行。 如果你没有行，除非你自己指定了行，否则就没有行。

DaRKoN_ suggests附加到tbody而不是在最后一个tr之后添加内容。 这解决了没有行的问题，但仍然没有防弹，因为理论上你可以有多个tbody元素，并且行将被添加到每个行。

权衡一切，我不确定是否有单一的单线解决方案可以解决每一种可能的情况。 您需要确保jQuery代码与您的标记一致。

我认为最安全的解决方案可能是确保您的table在标记table始终包含至少一个tbody ，即使它没有行。 在此基础上，您可以使用以下哪些行（但也可以考虑多个tbody元素）：

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

所以自从@Luke Bennett回答这个问题后，事情发生了变化。 这是一个更新。

jQuery自版本1.4（？）自动检测您尝试插入的元素（使用append() ， prepend() ， before()或after()方法中的任何一个）是<tr>并将其插入到表中的第一个<tbody>或者如果不存在则将其包装到新的<tbody> 。

所以是的，您的示例代码是可以接受的，并且可以与jQuery 1.4+一起使用。 ;）

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

如果您正在使用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

如果你有另一个变量，你可以在<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);

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

用javascript函数写

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

我的解决方案

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

用法：

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

当表中没有任何行时，我正在使用这种方式，并且每行都非常复杂。

style.css中：

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

xxx.html

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

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

...

jQuery有一个内置的工具来动态操作DOM元素。

您可以像这样向表中添加任何内容：

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

jQuery中的$('<some-tag>')是一个标签对象，它可以有几个可以设置和获取的attr属性，以及text ，它代表标签之间的文本： <tag>text</tag> 。

这是一些非常奇怪的缩进，但是你更容易看到这个例子中发生了什么。