在jQuery中添加表行

我使用jQuery向表中添加一行作为最后一行。

我是这样做的：

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

您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？

当前回答

)达里尔：

您可以使用appendTo方法将其附加到tbody，如下所示：

$(() => {
   $("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});

您可能希望使用最新的JQuery和ECMAScript。然后可以使用后端语言将数据添加到表中。也可以将其包装在变量中，如下所示：

$(() => {
  var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
  t_data.appendTo('tbody');
});

其他回答

我遇到了一些相关的问题，试图在单击的行之后插入一个表行。除了.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);

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

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

因此，是的，您的示例代码是可以接受的，并且可以与jQuery1.4+一起工作。；）

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

var html = $('#myTableBody').html();
html += '<tr><td>my data</td><td>more data</td></tr>';
$('#myTableBody').html(html);

$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>');

如果要在＜tr＞第一个子项之前添加行。

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

如果要在＜tr＞最后一个子项之后添加行。

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

简单来说：

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

推荐文章