如何使用jQuery向表添加一行作为最后一行？

我正在使用jQuery向表添加一行作为最后一行。

我是这样做的：

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

可以添加到此类表中的内容是否有限制（例如输入、选择、行数）？有没有不同的方法可以做到这一点？

分割线

网友回答：

jQuery有一个内置的工具来动态操作DOM元素。

您可以像这样向表中添加任何内容：

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery中的东西是一个标签对象，可以有几个可以设置和获取的属性，以及，它表示标签之间的文本：。$('<some-tag>')attrtext<tag>text</tag>

这是一些非常奇怪的缩进，但您更容易看到此示例中发生了什么。

分割线

网友回答：

您建议的方法不能保证为您提供所需的结果 – 例如，如果您有：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中总会有一个;这是正确的，但前提是至少有一行。如果没有行，则不会有行，除非您自己指定了行。tbodytbody

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

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

我认为最安全的解决方案可能是确保始终在标记中包含至少一个，即使它没有行。在此基础上，您可以使用以下内容，无论您有多少行（并且还考虑多个元素），它都可以工作：tabletbodytbody

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

分割线

网友回答：

所以自从贝内特回答这个问题@Luke以来，情况发生了变化。这是一个更新。

自 1.4（？）版开始，jQuery 会自动检测您尝试插入的元素（使用任何、、或方法）是否为 a，并将其插入到表中的第一个元素中，如果不存在，则将其包装到一个新元素中。append()prepend()before()after()<tr><tbody><tbody>

所以是的，您的示例代码是可以接受的，并且可以与 jQuery 1.4+ 一起使用。😉

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

模板简介：该模板名称为【如何使用jQuery向表添加一行作为最后一行？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。