在 jQuery 中添加表行

jQuery 中最后一行向表中添加额外行的最佳方法是什么？

这可以接受吗？

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

你可以添加到这样的表（例如输入，选择，行数）的限制是什么？

答案

您建议的方法无法保证为您提供您正在寻找的结果 - 例如，如果您有一个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 ; 这是事实，但前提是至少有一行。如果你没有行，就没有tbody ，除非你有自己指定的一个。

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

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

我认为最安全的解决方案可能是确保您的table在标记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')
            )
        )
    );

jQuery 中的$('<some-tag>')是一个标签对象，它可以有几个可以设置和获取的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>');