jQuery 中将附加行作为最后一行添加到表中的最佳方法是什么？
这是可以接受的吗？
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以添加到这样的表中的内容是否有限制（例如输入、选择、行数）？
在 jQuery 中添加表格行
IT技术
javascript
jquery
html-table
2021-01-23 23:45:17
6个回答
你建议的方法不能保证给你你正在寻找的结果 - 如果你有一个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 很好地说明tbody了 DOM 中总会有一个；这是真的，但前提是至少有一行。如果您没有行，则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()方法）是一个<tr>，并将其插入到第一个<tbody>在你的表或它包装成一个新的<tbody>，如果一个不存在。
所以是的，您的示例代码是可以接受的，并且可以与 jQuery 1.4+ 一起使用。;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
如果你有 a<tbody>和 a<tfoot>呢？
如：
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
然后它将在页脚中插入您的新行 - 而不是正文。
因此最好的解决方案是包含一个<tbody>tag 和 use .append，而不是.after.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
我知道您要求使用 jQuery 方法。我看了很多，发现我们可以通过以下函数以比直接使用 JavaScript 更好的方式做到这一点。
tableObject.insertRow(index)
index是一个整数，指定要插入的行的位置（从 0 开始）。也可以使用 -1 的值；这导致新行将插入到最后一个位置。
此参数在 Firefox 和Opera 中是必需的，但在 Internet Explorer、Chrome和Safari 中是可选的。
如果省略此参数，则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>
我希望它有帮助。