一尘不染

在 jQuery 中将附加行

jQuery

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

这可以接受吗?

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

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


阅读 241

收藏
2022-02-06

共2个答案

一尘不染

您建议的方法不能保证给您提供您正在寻找的结果 - 如果您有一个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 中总会有 a tbody;这是真的,但前提是至少有一行。如果您没有行,tbody除非您自己指定行,否则将没有行。

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

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

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

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
2022-02-06
一尘不染

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>.

这是一些非常奇怪的缩进,但你更容易看到这个例子中发生了什么。

2022-02-06