使用jQuery.append（）使用jQuery.appendTo（）使用jQuery.after（）使用Javascript.insertRow（）使用jQuery-添加html行

试试看：

//使用jQuery-append$（'#myTable>tbody'）.append（'<tr><td>3</td><td>Smith-Patel</td></tr>'）；//使用jQuery-appendTo$（'<tr><td>4</td><td>J.Thomson</td></tr>'）.appendTo（“#myTable>tbody”）；//使用jQuery-添加html行让tBodyHtml=$（'#myTable>tbody'）.html（）；tBodyHtml+='<tr><td>5</td><td>Patel S.</td></tr>'；$（'#myTable>tbody'）.html（tBodyHtml）；//使用jQuery-after$（'#myTable>tbody-tr:last'）.之后（'<tr><td>6</td><td>天使布鲁ice</td></tr>'）；//使用JavaScript-insertRowconst 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>名称</th></tr></thead><tbody><tr><td>1个</td><td>约翰·史密斯</td></tr><tr><td>2个</td><td>汤姆·亚当</td></tr></tbody></table>

在我看来，最快和明确的方法是

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

这里是演示不停摆弄

jQuery有一个内置的工具，可以随时操作DOM元素。

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

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

jQuery中的$（“＜some tag＞”）是一个标记对象，它可以有几个可以设置和获取的attr属性，以及文本，它表示标记之间的文本：＜tag＞text＜/tag＞。

这是一些非常奇怪的缩进，但您更容易看到这个示例中的情况。

要在当前行的最后一行添加新行，可以使用如下方法

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

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

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

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

使用javascript函数编写

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