在jQuery中添加表格行

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>

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


所以@Luke Bennett回答了这个问题后,情况发生了变化。 这是一个更新。

从版本1.4(?)开始,jQuery自动检测您尝试插入的元素(使用append()prepend()before()after()方法中的任何一个)是否为<tr> ,并将其插入到在你的表中第一个<tbody>或者将它包装成一个新的<tbody>如果它不存在的话。

所以是你的示例代码是可以接受的,并且可以在jQuery 1.4+中正常工作。 ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
链接地址: http://www.djcxy.com/p/529.html

上一篇: Add table row in jQuery

下一篇: Is jquery a javascript library or framework?