我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？
当前回答
我发现这个AddRow插件对于管理表行非常有用。不过，如果您只需要添加一行，Luke的解决方案将是最合适的。
其他回答
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＞。
这是一些非常奇怪的缩进，但您更容易看到这个示例中的情况。
您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。
下面是一个示例用法：
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
我建议
$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');
与
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');
第一个和最后一个关键字作用于要启动的第一个或最后一个标记，而不是关闭。因此，如果您不希望更改嵌套表，而是将其添加到整个表中，则这在嵌套表中的效果更好。至少，这是我发现的。
<table id=myTable>
<tbody id=first>
<tr><td>
<table id=myNestedTable>
<tbody id=last>
</tbody>
</table>
</td></tr>
</tbody>
</table>
当表中没有任何行时，我使用这种方式，而且每一行都非常复杂。
style.css：
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。
我希望这很有帮助。
<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>
