在jQuery中添加表行

小开

最佳答案

你建议的方法并不能保证给你你想要的结果——例如，如果你有一个 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 代码符合您的标记。

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

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

小开

如果你有一个 <tbody>和一个 <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>");

小开

您可以使用这个很棒的 JQuery 添加表行函数。对于有 <tbody>而没有 <tbody>的表来说，这种方法非常有效。此外，它还考虑到您最后一个表行的跨度。

下面是一个用法示例:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

小开

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

这是一些非常奇怪的缩进，但是对于您来说，可以更容易地看到在这个示例中发生了什么。

小开

我遇到了一些相关的问题，试图在单击的行之后插入一个表行。一切都很好，除了。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>

等等。

然后:

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

小开

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

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

小开

我推荐

$('#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>

小开

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

Css:

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

谢谢观赏

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


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


...

小开

对于这里发布的最佳解决方案，如果在最后一行中有一个嵌套表，那么新行将被添加到嵌套表中，而不是添加到主表中。一个快速解决方案(考虑包含/不包含 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>');

小开

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

小开

我的解决办法是:

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

用途:

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

小开

<table id=myTable>
<tr><td></td></tr>
<style="height=0px;" tfoot></tfoot>
</table>

您可以缓存页脚变量并减少对 DOM 的访问(注意: 使用假行而不是页脚可能会更好)。

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

小开

$('#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。

小开

我知道您要求使用 jQuery 方法。我看了很多，发现我们可以用一种比直接使用 JavaScript 更好的方式来实现它。

tableObject.insertRow(index)

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

这个参数在 Firefox 和歌剧中是必需的，但在 Internet Explorer、铬合金和旅行中是可选的。

如果省略了这个参数，那么在 Chrome 和 Safari 中，insertRow()会在 Internet Explorer 的最后一个位置和第一个位置插入一个新行。

它将适用于 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>

希望能有所帮助。

小开

因此，自从 @ Luke Bennett回答了这个问题，事情就发生了变化。

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

所以，是的，您的示例代码是可以接受的，并且可以很好地与 jQuery 1.4 + . ; 一起工作。)

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

小开

这里有些黑客代码。我想在超文本标示语言页面中维护一个行模板。表行0... n 在请求时呈现，此示例有一个硬编码行和一个简化的模板行。模板表是隐藏的，行标记必须位于有效的表中，否则浏览器可能会从 DOM树中删除它。添加行使用计数器 + 1标识符，当前值在 data 属性中维护。它保证每一行获得唯一的网址参数。

我已经在 Internet Explorer 8、 Internet Explorer 9、火狐、 Chrome、 Opera、诺基亚 Lumia 800、诺基亚 C7(使用塞班3)、安卓股票和火狐 beta 浏览器上运行了测试。

<table id="properties">
<tbody>
<tr>
<th>Name</th>
<th>Value</th>
<th>&nbsp;</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();
}

附言: 我把所有的荣誉都给了 jQuery 团队，他们应该得到一切。没有 jQuery 的 JavaScript 编程——我甚至不想去想那个噩梦。

小开

因为我也得到了一个方法太添加行在最后或任何具体的地方，所以我认为我也应该分享这一点:

首先找出行的长度:

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

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

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

小开

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

额外的行添加在第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>

小开

如果您正在使用可数据化的 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

小开

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


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

小开

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

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');
});
});
});

小开

到目前为止，尼尔的回答是最好的。然而事情很快就会变得一团糟。我的建议是使用变量来存储元素，并将它们附加到 DOM 层次结构中。

超文本标示语言

<table id="tableID">
<tbody>
</tbody>
</table>

JAVASCRIPT (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);

小开

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

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

这是小样 小提琴

小开

简单来说:

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

小开

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

小开

<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>

使用 javascript 函数进行编写

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

小开

如果您有另一个变量，您可以访问 <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);

小开

如果要在 <tr>的第一个子节点之前添加 row。

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

如果要在 <tr>的最后一个子节点之后添加 row。

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

小开

这也可以做到:

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

小开

这就是我的解决办法

$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</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>')
.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>

小开

提示: 通过 innerHTML or .html()在 html table中插入行在某些浏览器中是无效的(类似于 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);

小开

使用 JQuery 添加表行:

如果要添加 在表的最后一个行子元素之后行，可以尝试这样做

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

如果要添加 表的行子元素的第一个行，可以尝试这样做

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

小开

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

$('<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>

小开

上面的答案非常有帮助，但是当学生参考这个链接来添加表单中的数据时，他们通常需要一个样本。

我想贡献一个示例，从中获取输入，并使用 .after()使用字符串 interpolation向表插入 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>`);
}

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>

小开

要在当前行的最后添加一个新行，可以这样使用

$('#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";

小开

在这里，你可以只是点击按钮，然后你会得到输出。当您点击 添加行按钮，然后多一行添加。

希望对你有所帮助。

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

小开

在您的情况下，纯 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>)

小开

我已经尝试了最受欢迎的一个，但它不适合我，但下面的工作很好。

$('#mytable tr').last().after('<tr><td></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');
});

小开

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>');

小开

使用 Append ()
使用 ()
使用 JQuery. after ()
使用插入 Row ()
使用 jQuery-add html 行

试试这个:

// Using jQuery - append
$('#myTable > tbody').append('<tr><td>3</td><td>Smith Patel</td></tr>');


// Using jQuery - appendTo
$('<tr><td>4</td><td>J. Thomson</td></tr>').appendTo("#myTable > tbody");


// Using jQuery - add html row
let tBodyHtml = $('#myTable > tbody').html();
tBodyHtml += '<tr><td>5</td><td>Patel S.</td></tr>';
$('#myTable > tbody').html(tBodyHtml);


// Using jQuery - after
$('#myTable > tbody tr:last').after('<tr><td>6</td><td>Angel Bruice</td></tr>');


// Using JavaScript - insertRow
const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
const newRow = tableBody.insertRow(tableBody.rows.length);
newRow.innerHTML = '<tr><td>7</td><td>K. Ashwin</td></tr>';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
</tr>
<tr>
<td>2</td>
<td>Tom Adam</td>
</tr>
</tbody>
</table>