在 jQuery 中将附加行作为最后一行添加到表中的最佳方法是什么？
这可以接受吗？
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以添加到这样的表中的内容是否有限制（例如输入、选择、行数）？
Darryl Hein
问问题
1883553 次
41 回答
2261
您建议的方法不能保证给您提供您正在寻找的结果 - 如果您有一个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，包括上面示例中的多行。
更新：在最近有这个问题的活动之后重新访问这个答案。eyelidlessness 很好地说明了 DOM 中总会有 a tbody；这是真的，但前提是至少有一行。如果您没有行，tbody除非您自己指定行，否则将没有行。
DaRKoN_建议附加到tbody而不是在最后一个之后添加内容tr。这解决了没有行的问题，但仍然不是防弹的，因为理论上你可以有多个tbody元素并且行会被添加到每个元素中。
权衡一切，我不确定是否有一个单一的解决方案可以解决所有可能的情况。您需要确保 jQuery 代码与您的标记相符。
我认为最安全的解决方案可能是确保您table始终在标记中包含至少一个tbody，即使它没有行。在此基础上，您可以使用以下内容，无论您拥有多少行（并且还考虑多个tbody元素）：
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
于 2008-10-04T21:49:32.520 回答
810
jQuery 有一个内置的工具来动态操作 DOM 元素。
您可以像这样向表中添加任何内容：
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
jQuery中的$('<some-tag>')东西是一个标签对象，可以有几个attr可以设置和获取的属性，还有text，这里代表标签之间的文本：<tag>text</tag>.
这是一些非常奇怪的缩进，但你更容易看到这个例子中发生了什么。
于 2009-08-14T15:30:37.330 回答
327
因此，自从@Luke Bennett回答了这个问题后，事情就发生了变化。这是一个更新。
jQuery 从 1.4(?) 版本开始自动检测您尝试插入的元素（使用任何append()、prepend()、before()或after()方法）是否为 a<tr>并将其插入到表中的第一个元素中，如果不是则将<tbody>其包装成新元素<tbody>存在。
所以是的，您的示例代码是可以接受的，并且可以在 jQuery 1.4+ 上正常工作。;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
于 2012-06-05T20:12:48.013 回答
178
如果你有 a<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>");
于 2009-01-22T06:47:03.307 回答
79
我知道您要求使用 jQuery 方法。我看了很多，发现我们可以通过以下函数以比直接使用 JavaScript 更好的方式做到这一点。
tableObject.insertRow(index)
index是一个整数，它指定要插入的行的位置（从 0 开始）。也可以使用-1的值；这导致新行将插入到最后一个位置。
此参数在 Firefox 和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>
我希望它有所帮助。
于 2012-04-20T17:38:43.803 回答
38
我建议
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
与
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
firstandlast关键字作用于要开始的第一个或最后一个标签，而不是关闭。因此，如果您不希望更改嵌套表，而是添加到整个表中，这与嵌套表配合得更好。至少，这是我发现的。
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
于 2010-10-22T21:34:25.710 回答
36
在我看来，最快和最清晰的方法是
//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'
}));
这是演示 小提琴
于 2014-06-30T12:40:29.930 回答
27
这可以使用 jQuery 的“last()”函数轻松完成。
$("#tableId").last().append("<tr><td>New row</td></tr>");
于 2010-01-26T13:34:15.150 回答
20
我是这样解决的。
使用 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>于 2017-10-12T17:54:33.917 回答
18
当表格中没有任何行时，我正在使用这种方式，并且每一行都非常复杂。
样式.css：
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
于 2010-12-16T05:30:14.513 回答
14
对于此处发布的最佳解决方案，如果最后一行有嵌套表，则新行将添加到嵌套表而不是主表中。一个快速的解决方案（考虑有/没有 tbody 的表格和带有嵌套表格的表格）：
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);
}
}
使用示例：
add_new_row('#myTable','<tr><td>my new row</td></tr>');
于 2011-01-21T22:21:43.990 回答
12
我遇到了一些相关问题，试图在单击的行之后插入一个表格行。一切都很好，除了 .after() 调用不适用于最后一行。
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
我找到了一个非常不整洁的解决方案：
如下创建表（每行的 id）：
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
ETC ...
进而 ：
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
于 2009-10-05T19:17:01.137 回答
11
您可以使用这个很棒的jQuery 添加表格行功能。它适用于有<tbody>和没有的表。它还考虑了最后一个表格行的 colspan。
这是一个示例用法：
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
于 2009-03-02T13:21:48.080 回答
11
// 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);
于 2015-12-06T04:13:14.757 回答
10
我的解决方案：
//Adds a new table row
$.fn.addNewRow = function (rowId) {
$(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};
用法：
$('#Table').addNewRow(id1);
于 2012-03-09T00:48:03.793 回答
9
我发现这个AddRow 插件对于管理表行非常有用。不过，如果您只需要添加新行，卢克的解决方案将是最合适的。
于 2011-12-05T01:09:57.217 回答
9
尼尔的答案是迄今为止最好的答案。然而事情变得非常快。我的建议是使用变量来存储元素并将它们附加到 DOM 层次结构中。
HTML
<table id="tableID">
<tbody>
</tbody>
</table>
JAVASCRIPT
// 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);
于 2014-05-11T12:04:23.787 回答
9
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
用 javascript 函数编写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
于 2016-01-19T20:09:33.783 回答
8
这是我的解决方案
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
于 2017-07-20T02:34:42.373 回答
7
这是一些hackti hack代码。我想在HTML页面中维护一个行模板。表行 0...n 在请求时呈现，此示例有一个硬编码行和一个简化的模板行。模板表是隐藏的，并且行标签必须在有效的表中，否则浏览器可能会将其从DOM树中删除。添加一行使用 counter+1 标识符，当前值保存在 data 属性中。它保证每一行都有唯一的URL参数。
我已经在 Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、Nokia Lumia 800、Nokia C7（带有Symbian 3）、Android stock 和 Firefox beta 浏览器上运行测试。
<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">
<a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
</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><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><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 编程——我什至不想去想那个噩梦。
于 2013-03-28T21:51:47.210 回答
7
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');
于 2013-12-21T11:54:45.717 回答
7
我想我已经在我的项目中完成了，这里是：
html
<div class="container">
<div class = "row">
<div class = "span9">
<div class = "well">
<%= 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" />
</div>
</div>
</div>
</div>
js
$(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');
});
});
});
于 2014-01-31T06:13:58.103 回答
7
如果你有另一个变量，你可以<td>像这样尝试在标签中访问。
这样我希望它会有所帮助
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);
于 2016-10-14T05:18:02.890 回答
6
<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>
您可以缓存页脚变量并减少对 DOM 的访问（注意：使用假行而不是页脚可能会更好）。
var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
于 2012-04-13T10:47:12.497 回答
6
因为我也有办法在最后或任何特定的地方添加行，所以我想我也应该分享这个：
首先找出长度或行：
var r=$("#content_table").length;
然后使用下面的代码添加您的行：
$("#table_id").eq(r-1).after(row_html);
于 2013-05-20T09:14:50.013 回答
6
要在该主题上添加一个很好的示例，如果您需要在特定位置添加一行，这里是有效的解决方案。
额外的行添加在第 5 行之后，或者如果少于 5 行，则添加到表的末尾。
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。
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
于 2013-08-29T11:35:58.503 回答
5
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
将在表的第一 行添加一个新行TBODY，而不依赖于任何THEAD或TFOOT存在。（我没有从哪个版本的 jQuery 中找到.append()这种行为存在的信息。）
您可以在以下示例中尝试：
<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<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><br>
<table class="t"> <!-- table with two TBODYs -->
<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><br>
<table class="t"> <!-- table without TBODY -->
<thead>
<tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>
<table class="t"> <!-- table with TR not in TBODY -->
<tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>
<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>
在哪个示例a b行插入之后1 2，而不是3 4在第二个示例之后。如果表是空的，jQuery 会创建TBODY一个新行。
于 2012-04-19T10:53:35.660 回答
5
如果您使用的是 Datatable JQuery 插件，您可以尝试。
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
于 2013-10-02T05:06:13.180 回答
5
以一种简单的方式：
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
于 2015-06-16T12:11:44.080 回答
5
试试这个：非常简单的方法
$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</tbody>
</table>于 2019-03-26T11:47:51.083 回答
5
上面的答案非常有帮助，但是当学生参考此链接从表单中添加数据时，他们通常需要一个样本。
我想贡献一个示例 get input from from 并使用.after()string 将 tr 插入 table interpolation。
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();
$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
<thead>
<th>Name</th>
<th>Mark</th>
</thead>
</table>
</body>
</html>于 2019-05-12T05:39:38.253 回答
3
如果要在第一个孩子row之前添加。<tr>
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
如果要在最后一个孩子row之后添加。<tr>
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
于 2017-03-16T09:07:45.600 回答
2
使用 JQuery 添加表行：
如果你想在表的最后一行子之后添加行，你可以试试这个
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
如果你想添加表的行子的第一行，你可以试试这个
$('#myTable tr').after('<tr>...</tr><tr>...</tr>');
于 2019-02-05T19:27:39.100 回答
2
在您的情况下，纯 JS 很短
myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'
function add() {
myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>`
}td {border: 1px solid black;}<button onclick="add()">Add</button><br>
<table id="myTable"><tbody></tbody> </table>（如果我们删除它<tbody>也firstChild可以工作，但用 包裹每一行<tbody>）
于 2020-05-13T19:50:29.933 回答
1
我尝试了最受好评的一个，但它对我不起作用，但下面的效果很好。
$('#mytable tr').last().after('<tr><td></td></tr>');
即使那里有一个托比，这也能奏效。
于 2020-09-06T12:39:44.763 回答
0
这也可以这样做：
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
于 2017-03-30T07:24:13.197 回答
0
要在当前行的最后一行添加新行，您可以像这样使用
$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>');
您可以如上所述附加多行。您也可以像这样添加内部数据
$('#yourtableid tr:last').after('<tr><td>your data</td></tr>');
以另一种方式，您可以这样做
let table = document.getElementById("tableId");
let row = table.insertRow(1); // pass position where you want to add a new row
//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);
//add value to added td cell
cell0.innerHTML = "your td content here";
cell1.innerHTML = "your td content here";
cell2.innerHTML = "your td content here";
cell3.innerHTML = "your td content here";
于 2020-01-24T16:54:01.173 回答
0
在这里，您只需单击按钮即可获得输出。当您单击添加行按钮时，又添加了一行。
我希望它很有帮助。
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 25px 0;
width: 200px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<b>Add table row in jQuery</b>
<p>
Click on the button below to
add a row to the table
</p>
<button class="add-row">
Add row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 0</td>
</tr>
</tbody>
</table>
<!-- Script to add table row -->
<script>
let rowno = 1;
$(document).ready(function () {
$(".add-row").click(function () {
rows = "<tr><td>This is row "
+ rowno + "</td></tr>";
tableBody = $("table tbody");
tableBody.append(rows);
rowno++;
});
});
</script>
</body>
</html>
于 2020-01-29T11:04:32.087 回答
0
)达里尔：
您可以使用 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');
});
于 2021-01-31T02:20:51.647 回答
0
var html = $('#myTableBody').html();
html += '<tr><td>my data</td><td>more data</td></tr>';
$('#myTableBody').html(html);
或者
$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>');
于 2022-01-25T14:02:02.463 回答
-1
提示：在某些浏览器（类似）中，在html tablevia中插入行innerHTML or .html()无效，并且在任何浏览器中使用都不是好的建议。最好和最快的方法是使用代码。IE9.append("<tr></tr>")pure javascript
要以这种方式与 结合jQuery，只需添加类似于以下的新插件jQuery：
$.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);
};
现在在整个项目中使用它，类似于：
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);
于 2018-08-18T07:58:21.763 回答