题 在jQuery中添加表行


jQuery中最后一行向表中添加额外行的最佳方法是什么?

这可以接受吗?

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

你可以添加到这样的表(例如输入,选择,行数)的限制是什么?


2057
2017-10-04 21:33


起源


Thxs Ash。我也只是学习jQuery并且很难找到最好的方法,特别是简单的东西。他们作为两个问题的原因是因为我发布了一个,然后差不多一个小时后我意识到我应该把另一个放入其中并且不认为我应该改变第一个。 - Darryl Hein
因为这个: google.com/search?q=jquery+add+table+row - Darryl Hein
仅供参考 - 避免使用多个附加(极大地降低性能),而是建立您的字符串或使用更快的JavaScript连接。 - Gerrit Brink
看到: stackoverflow.com/a/50365764/7186739 - Super Model
如果行太复杂,我要做的是,保持第一行隐藏所需的结构,制作克隆并修改文本并在第一行后插入,这样如果你从ajax响应中获取数据,你的表将被创建,记住在循环外克隆它,然后用它来修改循环内的内容。 $(“#mainTable tbody”)。append(row); row是修改后的克隆副本:) - Aadam


答案:


你建议的方法不能保证给你你想要的结果 - 如果你有一个 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,包括上面例子中的多行。

更新: 在此问题的最近活动之后重新回答这个答案。没有眼皮的评论总会有一个很好的评论 tbody 在DOM中;这是事实,但前提是至少有一行。如果你没有行,就没有了 tbody 除非你自己指定了一个。

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

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

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

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

1872
2017-10-04 21:49



如果表中没有行,这是否有效? - Rama Vadakattu
@Rama,不,不会。需要有一个更好的解决方案。 - Brian Liang
DOM中总会有一个tbody。 - eyelidlessness
一个空的tbody不会验证你的HTML - 2ni
对其他解决方案的一个小改进是优化选择器。您可以通过以下方式提高速度: $('#myTable').find('tbody:last') 代替 $('#myTable > tbody:last')。 - Erik Töyrä


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

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

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

$('<some-tag>') jQuery中的东西是一个可以有几个的标记对象 attr 可以设置和获取的属性,以及 text,表示标签之间的文字: <tag>text</tag>

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


699
2017-08-14 15:30



对于正在尝试此操作的人,请仔细注意括号的位置。适当的嵌套至关重要。 - Ryan Lundy
结束标签怎么样?他们没必要吗? - senfo
$(“#tableClassname”)实际上不应该是$(“#tableID”),因为哈希符号是指ID而不是类名? - Dave
如果我想添加多个<td>,应该去哪里?谢谢! - sammiwei
我讨厌这种奇怪的链接。保持代码充满了这些东西是一场噩梦。 - bancer


从那时起事情发生了变化 @Luke Bennett 回答了这个问题。这是一个更新。

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

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

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

276
2018-06-05 20:12



小心这个假设。如果附加的标记以\ n或\ n \ r开头,则jQuery不会检测到它是<tr>并将其附加到<table>而不是<tbody>。我刚刚遇到这个问题,由MVC视图生成的标记在开头有一个额外的行。 - Mik
@Mik感谢你的抬头!我猜 yourString.trim() 可以解决这个问题。 - Salman Abbas
当然,但你必须考虑一下。如果你知道有一个,那就更好地养成附加<tbody>的习惯。 - Mik
jQuery 3.1仍然需要指定一个tbody。看看这里: jsfiddle.net/umaj5zz9/2 - user984003
这会导致我的页面刷新。我怎么能防止这种情况? - Avi


如果你有一个怎么办? <tbody> 和a <tfoot>

如:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

然后它会在页脚中插入新行 - 而不是身体。

因此,最好的解决方案是包括一个 <tbody> 标签和使用 .append, 而不是 .after

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

147
2018-01-22 06:47



你错误地实施了你的tfoot。它应该出现在tbody之前,而不是之后 - 见 w3.org/TR/html4/struct/tables.html#h-11.2.3。因此,除非您选择违反标准,否则我的解决方案仍然有效(在这种情况下,您可以预期其他事情也会出错)。无论你是否有人,我的解决方案也有效,而如果没有tbody,你的建议将失败。 - Luke Bennett
尽管<tfoot />中有任何错误,但这是一个更好的解决方案。如果没有<tbody />,您可以在<table />本身使用相同的技术。鉴于“已接受的答案”需要额外检查以确定是否存在现有行。 (我知道OP没有指明这个要求,但没关系 - 这篇文章在谷歌搜索这项技术时排在第一位,最好的答案不是顶级。) - Clever Human
这是比查找更好的解决方案。在几次迭代中,这种技术似乎始终有效。作为添加的FYI,您可以使用.prepend将行添加到表的开头,而.append将行放在表的末尾。 - Lance Cleveland
这是不正确的,它会将行追加到tbody中的每一行 - garg10may
@ garg10你能告诉我怎么样?它针对的是tbody,而不是任何子元素。 - ChadT


我知道你已经要求了一个jQuery方法。我看了很多,发现我们可以通过以下函数直接使用JavaScript来更好地完成它。

tableObject.insertRow(index)

index是一个整数,指定要插入的行的位置(从0开始)。也可以使用-1的值;这导致新行将插入最后一个位置。

Firefox和中需要此参数 歌剧,但它在Internet Explorer中是可选的,  和 苹果浏览器

如果省略此参数, insertRow() 在Internet Explorer的最后一个位置以及Chrome和Safari中的第一个位置插入一个新行。

它适用于HTML表的每个可接受的结构。

以下示例将在last中插入一行(-1用作索引):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

我希望它有所帮助。


49
2018-04-20 17:38



这个方法的问题(正如我刚才发现的)是,如果你有一个页脚,它将在页脚后面添加-1作为索引。 - kdubs


我建议

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

而不是

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

first 和 last 关键字适用于要启动的第一个或最后一个标记,而不是关闭。因此,如果您不希望更改嵌套表,而是添加到整个表中,则嵌套表会更好。至少,这是我发现的。

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

31
2017-10-22 21:34





在我看来,最快捷,最明确的方式是

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

这是演示 小提琴

此外,我可以推荐一个小函数来进行更多的html更改

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

如果您使用我的字符串编辑器,您可以这样做

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

这是演示 小提琴


26
2018-06-30 12:40