在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,包括上面例子中的多行。
更新:在这个问题最近的活动中重新审视这个答案。 eyelidlessness做了一个很好的评论,在DOM中总是会有一个tbody';这是真的,但只有在至少有一行的情况下。如果你没有行,就不会有
tbody`,除非你自己指定一个。
DaRKoN_ 建议 附加到tbody
,而不是在最后的tr
之后添加内容。这解决了没有行的问题,但仍然不是万无一失的,因为理论上你可以有多个`tbody'元素,行将被添加到每个元素中。
权衡一切,我不确定是否有一个单一的解决方案可以考虑到每一种可能的情况。你需要确保jQuery的代码与你的标记相符。
我认为最安全的解决方案可能是确保你的table
总是包括至少一个tbody
在你的标记中,即使它没有行。在此基础上,你可以使用下面的方法,不管你有多少行,都可以使用(同时也考虑到多个tbody
元素)。
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
如果你有一个<tbody>
和一个<tfoot>
呢?
比如说。
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
那么它就会在页脚插入你的新行--而不是在正文中。
因此,最好的解决办法是包含一个<tbody>
标签并使用.append
,而不是.after
。
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
你可以使用这个伟大的jQuery add table row函数。它对有<tbody>
和没有`
下面是一个使用实例。
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));