我使用jQuery将一行添加到表格的末尾。我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
在这样的表格中，您可以添加的内容是否有限制（例如输入、选择、行数）？是否有其他方法来做到这一点？
在jQuery中添加表格行
2656
- Darryl Hein
5
4谢谢，Ash。我也在学习jQuery，发现很难找出最好的方法，特别是对于简单的东西。这两个问题之所以分开提问，是因为我先发布了一个问题，大约一个小时后才意识到我应该再加上另一个问题，而且我觉得不应该更改第一个问题。 - Darryl Hein
33由于这个原因：http://www.google.com/search?q=jquery+add+table+row - Darryl Hein
19请注意避免使用多个 append 操作（会严重降低性能），相反，应该逐步构建字符串或使用 JavaScript 的 join 方法来提高速度。 - Gerrit Brink
1请参考以下链接：https://dev59.com/enI95IYBdhLWcg3wxA8-#50365764 - Billu
2如果行过于复杂，我会隐藏第一行并保留所需的结构，然后克隆并修改文本，并将其插入到第一行之后。这样，如果您从ajax响应中获取数据，则可以创建表格。请记住在循环外克隆它，然后在循环内使用它来修改内容。$("#mainTable tbody").append(row); row是修改后的克隆副本 :) - Aadam
42个回答
2307
您提出的方法不能保证会得到您想要的结果 - 如果您有一个标签，会怎么样呢：
<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()方法中包含任何内容，包括多行，就像上面的例子一样。
更新：重新审视这个回答，基于最近对此问题的活动。eyelidlessness发表了一个很好的评论，指出DOM中始终会有一个；这是正确的，但仅当至少有一行时才成立。如果没有行，除非您自己指定，否则不会有。
DaRKoN_ 建议将内容添加到而不是添加到最后一个之后。这避免了没有行的问题，但仍然不是万无一失的，因为理论上您可以有多个元素，行将被添加到其中每个元素。
权衡所有因素，我不确定是否存在一个单行解决方案，可以解决每种可能的情况。您需要确保jQuery代码与您的标记匹配。
我认为最安全的解决方案可能是确保您的标记中始终包含至少一个，即使它没有行。基于此，您可以使用以下内容，它可以处理任意数量的行（还考虑到多个元素）：
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
- Luke
842
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>.
这个缩进看起来很奇怪，但是这个例子能更容易地让你明白发生了什么。
- Neil
338
从 @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>');
- Salman von Abbas
185
如果你有一个 <tbody> 和一个 <tfoot>，那会怎样呢？
例如：
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
那么它会将您的新行插入页脚 - 而不是正文。
因此，最好的解决方案是包含一个标记并使用.append，而不是.after。
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
- DaRKoN_
84
我知道你要求使用jQuery方法。我查了很多资料，发现我们可以通过以下函数以比直接使用JavaScript更好的方式来实现它。
tableObject.insertRow(index)
index 是一个整数，它指定要插入的行的位置（从 0 开始）。也可以使用 -1 的值将新行插入到最后一个位置。火狐浏览器和 Opera 中需要此参数，但在 Internet Explorer、Chrome 和 Safari 中可选。
如果省略此参数，则
insertRow() 将在 Internet Explorer 中在最后位置插入新行，在 Chrome 和 Safari 中在第一个位置插入新行。
对于 HTML 表的每个可接受的结构都有效。
以下示例将在最后一行插入新行（使用 -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>
希望它有所帮助。
- shashwat
40
我建议
$('#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>
- Curtor
39
在我看来，最快捷和清晰的方式是
//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>');
这里有一个演示 Fiddle
此外，我可以建议一个小函数来进行更多的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'
}));
这是演示Fiddle
- sulest
2
如果您有多个
tbody，则可以获得多个插入。 - Mark Schultheiss可以的 :) 你可以尝试使用
$("SELECTOR").last() 来限制你的标签集合。 - sulest28
可以使用 jQuery 的 "last()" 函数轻松实现这一点。
$("#tableId").last().append("<tr><td>New row</td></tr>");
- Nischal
1
9好主意，但我认为你需要将选择器更改为 #tableId tr，因为现在你会得到一个在表格下方添加行的表格。 - Darryl Hein
24
我是用以下方法解决的。
使用 jQuery
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
片段
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>New York</td>
</tr>
</table>- Anton vBR
2
我现在可以成功地在新行中添加动态数据，但是在使用这种方法后，我的自定义过滤器不起作用了。你有什么解决办法吗？谢谢。 - Arjun
我认为你需要调用某种更新函数。没有示例很难说清楚。 - Anton vBR
19
当表格中没有任何行时，以及每一行都非常复杂时，我会使用这种方法。
style.css：
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
- Dominic
1
谢谢。这是非常优雅的解决方案。我喜欢它如何将模板保持在网格内。这使得代码变得更简单、更易于阅读和维护。再次感谢。 - Rodney Hickman
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接