在 jQuery 中添加表格行

Question

我正在使用 jQuery 向表中添加额外的行作为最后一行。

我是这样做的：

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

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

原文由 Darryl Hein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

更新： 在最近有这个问题的活动之后重新访问这个答案。 eyelidlessness 很好地说明了 DOM 中总会有一个 tbody ；这是真的，但前提是至少有一行。如果您没有行，则除非您自己指定了行，否则将没有 tbody 。

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

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

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

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

原文由 Luke Bennett 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

这是一些非常奇怪的缩进，但您可以更轻松地了解此示例中发生的事情。

原文由 Neil 发布，翻译遵循 CC BY-SA 3.0 许可协议