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

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

更新：在最近关于这个问题的活动之后，重新审视这个答案。无眼睑是一个很好的评论，即 DOM 中总会有一个;这是真的，但前提是至少有一行。如果没有行，除非您自己指定了行，否则不会有行。tbodytbody

DaRKoN_建议附加到 而不是在最后一个 .这解决了没有行的问题，但仍然不是防弹的，因为理论上你可以有多个元素，并且行会被添加到每个元素中。tbodytrtbody

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

我认为最安全的解决方案可能是确保在标记中始终包含至少一个，即使它没有行。在此基础上，您可以使用以下命令，无论您拥有多少行（并且还考虑多个元素），它都可以工作：tabletbodytbody

$('#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添加表行函数。它适用于有和没有的表。此外，它还考虑了表上一行的 colspan。<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>')attrtext<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>'); 

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

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

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

样式.css：

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

xxx.html

...
<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 插件对于管理表格行非常有用。不过，如果您只需要添加一个新行，则 Luke 的解决方案将是最合适的。

我的解决方案：

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

将新行添加到表的第一行，而不依赖于任何或存在。 （我没有找到来自哪个版本的 jQuery 存在此行为的信息。TBODYTHEADTFOOT.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>

在第二个示例中，在哪个示例中，在 之后插入了哪个示例行，而不是在 之后。如果表为空，jQuery 将创建一个新行。a b1 23 4TBODY

我知道你要求一个jQuery方法。我看了很多，发现我们可以以比直接使用JavaScript更好的方式通过以下函数来做到这一点。

tableObject.insertRow(index)

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

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

如果省略此参数，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>

我希望它有所帮助。

因此，自从贝内特@Luke回答了这个问题以来，情况发生了变化。这是一个更新。

从1.4（？）版本开始，jQuery会自动检测您尝试插入的元素（使用任何append（），prepend（），before（）或after（）方法）是否为a，并将其插入到表中的第一个元素中，或者将其包装到一个新的元素中（如果不存在）。<tr><tbody><tbody>

所以是的，您的示例代码是可以接受的，并且可以在 jQuery 1.4+ 中正常工作。;)

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

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

我已经在Internet Explorer 8，Internet Explorer 9，Firefox，Chrome，Opera，诺基亚Lumia 800，诺基亚C7（带有Symbian 3），Android股票和Firefox测试版浏览器上运行了测试。

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

PS：我把所有的功劳都归功于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>

如果您使用的是 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

<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 层次结构中。

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

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

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

简单来说：

$('#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> 第一个子项之前添加行。

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

如果要在 <tr> 最后一个子项之后添加行。

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

提示：在某些浏览器中插入行在via中是无效的（类似），并且在任何浏览器中使用都不是好的建议。最好和最快的方法是使用代码。html tableinnerHTML or .html()IE9.append("<tr></tr>")pure javascript

对于以这种方式与 结合使用，只需添加类似于以下内容的新插件：jQueryjQuery

$.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 添加 tabe 行：

如果你想在表的最后一行子行之后添加行，你可以试试这个

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

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

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

上面的答案非常有帮助，但是当学生引用此链接从表单添加数据时，他们通常需要一个样本。

我想贡献一个示例，从中获取输入，并使用字符串将tr插入到表中。.after()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>

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

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

1. 使用 jQuery .append（）
2. 使用 jQuery .appendTo（）
3. 使用 jQuery .after（）
4. 使用 Javascript .insertRow（）
5. 使用 jQuery - 添加 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>