一尘不染

在jQuery中添加表格行

javascript

jQuery在表中添加最后一行作为最后一行的最佳方法是什么?

这可以接受吗?

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

您可以向这样的表中添加什么内容(例如输入,选择,行数)是否有限制?


阅读 416

收藏
2020-04-23

共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,就可以在方法中包括任何内容,包括上面示例中的多行。

更新:
在最近对该问题进行的活动之后,重新访问此答案。双眼失明很好地说明tbody了DOM中总会有一个。这是正确的,但前提是至少有一行。如果没有行,tbody除非您自己指定一个行,否则将没有行。

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

权衡所有因素,我不确定是否有一个单一的解决方案可以解决每种可能的情况。您将需要确保jQuery代码符合您的标记。

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

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