在 jQuery 中添加表行
2022-08-29 22:06:19
我正在使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
可以添加到此类表中的内容是否有限制(例如输入、选择、行数)?有没有不同的方法来做到这一点?
我正在使用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>');
只要方法是有效的 HTML,就可以在方法中包含任何内容,包括上述示例中的多行。after()
更新:在最近对这个问题进行活动之后,重新审视这个答案。无眼睑是一个很好的评论,即DOM中总会有一个;这是真的,但前提是至少有一行。如果没有行,则除非您自己指定了行,否则不会有行。tbody
tbody
DaRKoN_建议追加到 而不是在最后一个之后添加内容。这解决了没有行的问题,但仍然不是防弹的,因为理论上你可以有多个元素,并且行会被添加到每个元素中。tbody
tr
tbody
权衡一切,我不确定是否有一个单线解决方案可以解释每个可能的场景。您需要确保jQuery代码与您的标记一起计数。
我认为最安全的解决方案可能是确保始终在标记中包含至少一个,即使它没有行。在此基础上,您可以使用以下内容,无论您有多少行(并且还考虑了多个元素),这些行都可以工作: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>
这是一些非常奇怪的缩进,但您更容易看到此示例中发生的情况。