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>');