关于javascript：在jQuery中添加表行

Add table row in jQuery

在jquery中，向表中添加一行作为最后一行的最佳方法是什么？

这可以接受吗？

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

您可以向这样的表中添加的内容(如输入、选择、行数)是否有限制？

相关讨论

你建议的方法并不能保证给你想要的结果-如果你有一个tbody，比如：

1
2
3
4
5
6

你最终会得到以下结果：

1
2
3
4
5
6
7

因此，我建议采用这种方法：

1	$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

只要是有效的HTML，就可以在after()方法中包含任何内容，包括上面示例中的多行。

更新：在最近关于此问题的活动之后重新访问此答案。眼睑松弛可以很好地说明dom中总是有一个tbody；这是正确的，但前提是至少有一行。如果没有行，除非您自己指定了一行，否则不会有tbody。

Darkon_u建议附加到tbody，而不是在最后一个tr之后添加内容。这就解决了没有行的问题，但仍然不是防弹的，因为理论上可以有多个tbody元素，并且行将被添加到每个元素中。

综合考虑，我不确定是否有一个单一的一行解决方案可以解释每一个可能的场景。您需要确保jquery代码与您的标记相匹配。

我认为最安全的解决方案可能是确保您的table在标记中始终至少包含一个tbody，即使它没有行。在此基础上，您可以使用以下方法，无论您拥有多少行(同时考虑多个tbody元素)，这些方法都可以工作：

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

相关讨论

如果表中没有行，此操作是否有效？
@拉玛，不会的。需要更好的解决方案。
DOM中总是有一个tbody。
为什么不在tbody上放置一个ID来停止myTable>tbody选择的需要？
@加雷斯，你可以这么做。但是，当您没有在标记中指定tbody时，这种方法仍然有效(因为它仍然存在于dom中)。因此它有点可重用。
但是空的tbody不能验证您的HTML
$('myTable>tbody:last').append版本似乎颠倒了表行的顺序。
对原本不错的解决方案的一个微小改进是优化选择器。您可以使用：$('#myTable').find('tbody:last')而不是$('#myTable > tbody:last')来提高速度。
注：如果存在，第一个解决方案可以将行添加到tfoot中，而第二个解决方案则不会。
@Matthijswsels不一定是-t脚应该在tBody之前。后来把它放在HTML4中是无效的，HTML5允许你这样做，但它仍然不理想。尽管现在大多数人可能会使用HTML5(不像我第一次写答案的时候)，但这绝对值得标记。
@我不知道。下次我做桌子的时候，我会记住的。
"眼睑松弛是一个很好的评价，在DOM中总是会有一个tbody"——我只是在没有tbody的情况下尝试了这个方法，但是它不起作用——它只在有tbody的情况下起作用。
认为最好的(不是为了速度，还有优化的空间)是：var tbl=$("mytable")；if(tbl.find("tbody:last").length)tbl=tbl.find("tbody:last")；tbl.append("
…
…
")；
@Lukebennett没有办法让作者指定HTML5，浏览器也不一定注意到doctype中的版本，因此，根据他们使用的浏览器(以及你无法控制的浏览器)，一些幸运的访问者是否获得HTML5的行为几乎是运气不好。；-)当然，随着时间的推移，浏览器将使用HTML5，但它还是一个移动的目标…
找这种东西已经有一段时间了。谢谢你^。^真傻，有时候javascript真是变幻莫测。
对于此处的格式设置，抱歉：/在循环之前添加此$('myTable:Not(：has("tbody"))).append("
")；/*add if not there/var tbod=$('.myTableBody')；/Dont search for this every time use a var*//////then use this in your loop.tbod.append('
..
..
'')；
@Brainslugs83是对的-我必须声明一个空的tbody，当桌子是空的时候它才能正常工作。
我需要在我的新项目中使用它，我意识到这个答案并没有得到我想要的结果，而且我的表中定义了一个tbody。我可以这样做：$('#myTable').find('tbody:last tr:last').after('
...</tr>');。
更新：我认为不需要你只需添加这个代码就可以正常工作。$("myTable tbody").append("
my data
more data
")；
您可以在内部(td)使用
同时也要了解
。是的，这是一个非常古老的答案，阅读其他答案以获得更新的笔记/版本资料。
还要注意，不能使用此方法连接到数组中位置的引用中。但是，您可以在append()函数之外定义它们，并引用变量。

jquery有一个内置的功能，可以动态地操作DOM元素。

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

1
2
3
4
5
6
7
8
9

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

jquery中的$('')是一个标签对象，它可以有几个可以设置和获取的attr属性，以及text表示标签之间的文本：text。

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

相关讨论

所以，自从@luke bennett回答这个问题后，情况就发生了变化。这是一个更新。

jquery自1.4版(？)自动检测您试图插入的元素(使用append()、prepend()、before()或after()方法中的任何一种)是否为

，并将其插入表中的第一个

，或者如果不存在则将其包装为新的

。

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

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

相关讨论

然后它会在页脚中插入新行，而不是在正文中。

因此，最好的解决方案是包含一个

标签，并使用.append，而不是.after。

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

相关讨论

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

此参数在Firefox和Opera中是必需的，但在Internet Explorer、Chrome和Safari中是可选的。

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

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

下面的示例将在最后插入一行(-1用作索引)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

</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>

希望有帮助。

相关讨论

我推荐

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

而不是

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

first和last关键字在要启动的第一个或最后一个标记上工作，而不是关闭。因此，如果您不希望更改嵌套表，而是将其添加到整个表中，那么这对嵌套表的作用会更好。至少，这是我发现的。

1
2
3
4
5
6
7
8
9
10

在我看来，最快、最清晰的方法是

1
2
3
4
5
6
7
8

//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更改

1
2
3
4
5
6
7
8
9

//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] : '';
});
}
}());

如果你用我的弦乐作曲家，你可以这样做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这是演示小提琴

相关讨论

这可以使用jquery的"last()"函数轻松完成。

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

相关讨论

当表中没有任何行，并且每一行都非常复杂时，我使用这种方法。

CSS：

1
2
3
4
5

...
#templateRow {
display:none;
}
...

XXX.HTML

1
2
3
4
5
6
7

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

相关讨论

为了得到这里发布的最佳解决方案，如果最后一行有一个嵌套表，那么新行将被添加到嵌套表中，而不是主表中。快速解决方案(考虑带/不带tbody的表和带嵌套表的表)：

1
2
3
4
5
6

function add_new_row(table, rowcontent) {
if ($(table).length > 0) {
if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
}
}

使用实例：

1	add_new_row('#myTable','<tr><td>my new row</td></tr>');

我遇到了一些相关的问题，试图在单击的行后插入一个表行。除了最后一行的.after()调用不起作用外，其他一切都很好。

1	$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

最后我得到了一个非常不整洁的解决方案：

创建表如下(每行ID)：

1
2
3

等。。。

然后：

1	$('#traffic tbody').find('tr.trafficBody' + idx).after(html);

相关讨论

我是这样解决的。

使用jQuery

1
2
3
4
5
6

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

片断

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13

// Create a row and append to table
var row = $('<tr />', {})
.appendTo("#table_id");

// Add columns to the row. <td> properties can be given in the JSON
$('<td />', {
'text': 'column1'
}).appendTo(row);

$('<td />', {
'text': 'column2',
'style': 'min-width:100px;'
}).appendTo(row);

相关讨论

我的解决方案：

1
2
3
4

//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

用途：

1	$('#Table').addNewRow(id1);

相关讨论

尼尔的回答是迄今为止最好的。但是事情会很快变得混乱。我的建议是使用变量来存储元素并将它们附加到DOM层次结构中。

HTML

1
2
3
4

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);

我发现这个addrow插件对于管理表行非常有用。不过，如果您只需要添加一行，卢克的解决方案将是最合适的。

1
2
3
4
5
6
7

使用javascript函数编写

1	document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';

这是一些黑客代码。我想在HTML页面中维护一个行模板。表行0…n在请求时呈现，这个示例有一个硬编码行和一个简化的模板行。模板表是隐藏的，行标记必须在有效的表中，否则浏览器可能会将其从DOM树中删除。添加行使用counter+1标识符，当前值在数据属性中维护。它保证每一行获得唯一的URL参数。

我在Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、Nokia Lumia 800、Nokia C7(带Symbian 3)、Android Stock和Firefox Beta浏览器上运行过测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th> </th>
</tr>
<tr>
<td nowrap>key1</td>
<td><input type="text" name="property_key1" value="value1" size="70"/></td>
<td class="data_item_options">

</td>
</tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
<td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
<td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
<td></td>
</tr>
</table>
Add row<br/>
<br/>

- - - -
// add row to html table, read html from row template
function addRow(sTableId) {
// find destination and template tables, find first <tr>
// in template. Wrap inner html around <tr> tags.
// Keep track of counter to give unique field names.
var table = $("#"+sTableId);
var template = $("#"+sTableId+"_rowtemplate");
var htmlCode ="<tr>"+template.find("tr:first").html()+"</tr>";
var id = parseInt(template.data("counter"),10)+1;
template.data("counter", id);
htmlCode = htmlCode.replace(/\${counter}/g, id);
table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
var row = $(childElem).closest("tr"); // find <tr> parent
row.remove();
}

PS：我把所有的学分都给了jquery团队，他们应该得到一切。没有jquery的javascript编程——我甚至不想去想那个噩梦。

我想我已经完成了我的项目，这里是：

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<%= form_for (@replication) do |f| %>
<table>
<tr>
<td>
<%= f.label :SR_NO %>
</td>
<td>
<%= f.text_field :sr_no , :id =>"txt_RegionName" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Particular %>
</td>
<td>
<%= f.text_area :particular , :id =>"txt_Region" %>
</td>
</tr>
<tr>
<td>
<%= f.label :Unit %>
</td>
<td>
<%= f.text_field :unit ,:id =>"txt_Regio" %>
</td>
</tr>
<tr>

<td>
<%= f.label :Required_Quantity %>
</td>
<td>
<%= f.text_field :quantity ,:id =>"txt_Regi" %>
</td>
</tr>
<tr>
<td></td>
<td>
<table>
<tr><td>
<input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
</td><td><input type="button" name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
</td></tr>
</table>
</td>
</tr>
</table>
<% end %>
<table id="lst_Regions" style="width: 500px;" border="2" class="table table-striped table-bordered table-condensed">
<tr>
<td>SR_NO</td>
<td>Item Name</td>
<td>Particular</td>
<td>Cost</td>
</tr>
</table>
<input type="button" id="submit" value="Submit Repication" class="btn btn-success" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {
$('#submit').prop('disabled', true);
$('#btn_AddToList').click(function () {
$('#submit').prop('disabled', true);
var val = $('#txt_RegionName').val();
var val2 = $('#txt_Region').val();
var val3 = $('#txt_Regio').val();
var val4 = $('#txt_Regi').val();
$('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
$('#txt_RegionName').val('').focus();
$('#txt_Region').val('');
$('#txt_Regio').val('');
$('#txt_Regi').val('');
$('#btn_AddToList1').click(function () {
$('#submit').prop('disabled', false).addclass('btn btn-warning');
});
});
});

1
2
3

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

这是我的解决方案

1	$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

1
2
3
4

您可以缓存footer变量并减少对dom的访问(注意：也许最好使用伪行而不是footer)。

1 2	var footer = $("#mytable tfoot") footer.before("<tr><td></td></tr>")

为了在这个主题上添加一个好的例子，如果需要在特定位置添加一行，这里提供了一个有效的解决方案。

在第5行之后添加额外的行，如果少于5行，则添加到表的末尾。

1
2
3
4
5
6
7

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
$('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
$('#my_table tr:last').after(ninja_row);
}

我将内容放在表下面的一个就绪(隐藏)容器中..因此，如果您(或设计器)必须进行更改，则不需要编辑JS。

1
2
3
4
5
6
7

如果你有另一个变量，你可以在

标签中访问，就像这样。

我希望这样会有帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var table = $('#yourTableId');
var text = 'My Data in td';
var image = 'your/image.jpg';
var tr = (
'<tr>' +
'<td>'+ text +'</td>'+
'<td>'+ text +'</td>'+
'<td>'+
'<img src="' + image + '" alt="yourImage">'+
'</td>'+
'</tr>'
);

$('#yourTableId').append(tr);

因为我也有办法在最后或任何特定的地方添加行，所以我想我也应该分享这一点：

首先找出长度或行数：

1	var r=$("#content_table").length;

然后使用下面的代码添加行：

1	$("#table_id").eq(r-1).after(row_html);

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

将在表的第一个TBODY中添加新行，而不依赖于存在的任何THEAD或TFOOT。(我没有找到jquery .append()的哪个版本的信息，该行为存在。)

您可以在以下示例中进行尝试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<table class="t"> 
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table>

<table class="t"> 
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
<tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
<tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table>

<table class="t"> 
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
</table>

<table class="t"> 
<tr><td>1</td><td>2</td></tr>
</table>

<table class="t">
</table>

$('.t').append('<tr><td>a</td><td>a</td></tr>');

其中，在第二个示例中，a b行插入到1 2之后，而不是在3 4之后。如果表为空，jquery将为新行创建TBODY。

如果您使用的是datatable jquery插件，则可以尝试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

oTable = $('#tblStateFeesSetup').dataTable({
"bScrollCollapse": true,
"bJQueryUI": true,
...
...
//Custom Initializations.
});

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

参考数据表fnadddata数据表api

简单来说：

1	$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

相关讨论

如果要在

第一个孩子之前添加row。

1	$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

如果你想把row加在

最后一个孩子后面。

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

试试这个：非常简单的方法

1	$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");

1
2
3
4
5
6
7

使用jquery添加tabe行：

如果要在表的最后一个子行之后添加行，可以尝试此操作

1	$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

如果要添加表的行子级的第一行，可以尝试此操作

1	$('#myTable tr').after('<tr>...</tr><tr>...</tr>');

也可以这样做：

1	$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")

相关讨论

提示：通过innerHTML or .html()在html table中插入行在某些浏览器(类似IE9中)中无效，在任何浏览器中使用.append("

")都不是很好的建议。最好和最快的方法是使用pure javascript代码。

对于与jQuery结合的方式，只需添加与jQuery类似的新插件：

1
2
3
4
5
6

$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};

现在整个项目中使用它类似于：

1	var addedRow = $("#myTable").addRow(-1/add to end/, 2);