我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></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>");
其他回答
<tr id="tablerow"></tr>
$('#tablerow').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>");
)达里尔：
您可以使用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');
});
在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。
我希望这很有帮助。
<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>
在我看来，最快和明确的方法是
//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'
}));
这里是演示不停摆弄
