我使用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>”)是一个标记对象,它可以有几个可以设置和获取的attr属性,以及文本,它表示标记之间的文本:<tag>text</tag>。

这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。

其他回答

这可以使用jQuery的“last()”函数轻松完成。

$("#tableId").last().append("<tr><td>New row</td></tr>");

我是这样解决的。

使用jquery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

一小条

$('#tab').append($('<tr>')追加($('<td>')追加(“text1”))追加($('<td>')追加(“text2”))追加($('<td>')追加(“text3”))追加($('<td>')追加(“text4”)))<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“tab”><tr><th>名字</th><th>姓氏</th>年龄</th><th>城市</th></tr><tr><td>吉尔</td><td>史密斯</td><td>50个</td><td>纽约</td></tr></table>

你建议的方法并不一定能给你带来你想要的结果——例如,如果你有一个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,包括上面示例中的多行。

更新:在最近使用此问题进行活动后,重新审视此答案。无眼是一个很好的评论,即DOM中总会有一个tbody;这是正确的,但前提是至少有一行。如果没有行,除非您自己指定了一行,否则不会有tbody。

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

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

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

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

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

jQuery自1.4版(?)起自动检测您试图插入的元素(使用append()、prepend()、before()或after()方法中的任何一种)是否是<tr>,并将其插入到表中的第一个<tbody>中,如果不存在,则将其包装到新的<tbody中。

因此,是的,您的示例代码是可以接受的,并且可以与jQuery1.4+一起工作。;)

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

)达里尔:

您可以使用appendTo方法将其附加到tbody,如下所示:

$(() => {
   $("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});

您可能希望使用最新的JQuery和ECMAScript。然后可以使用后端语言将数据添加到表中。也可以将其包装在变量中,如下所示:

$(() => {
  var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
  t_data.appendTo('tbody');
});