javascript - 在 jQuery 中添加表格行

Question

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

我是这样做的:

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

您可以添加到这样的表中的内容是否有限制(例如输入、选择、行数)？有其他方法吗？

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_ suggests附加到 tbody 而不是在最后一个 tr 之后添加内容。这解决了没有行的问题，但仍然不是防弹的，因为理论上你可以有多个 tbody 元素并且行会被添加到每个元素中。

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

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

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