我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？
当前回答
在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。
我希望这很有帮助。
<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>
其他回答
$('#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>
在该示例中，b行插入在1 2之后，而不是第二示例中的3 4之后。如果表为空，jQuery将为新行创建TBODY。
由于我也有一种方法在最后或任何特定位置添加行，所以我认为我也应该分享这一点：
首先找出行的长度：
var r=$("#content_table").length;
然后使用以下代码添加行：
$("#table_id").eq(r-1).after(row_html);
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
使用javascript函数编写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
我是这样解决的。
使用jquery
$('#tab').append($('<tr>')
.append($('<td>').append("text1"))
.append($('<td>').append("text2"))
.append($('<td>').append("text3"))
.append($('<td>').append("text4"))
)
一小条
$（'#tab'）.append（$（'<tr>'）追加（$（'<td>'）追加（“text1”））追加（$（'<td>'）追加（“text2”））追加（$（'<td>'）追加（“text3”））追加（$（'<td>'）追加（“text4”））)<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“tab”><tr><th>名字</th><th>姓氏</th>年龄</th><th>城市</th></tr><tr><td>吉尔</td><td>史密斯</td><td>50个</td><td>纽约</td></tr></table>
所以，自从@Luke Bennett回答这个问题后，情况就发生了变化。这里有一个更新。
jQuery自1.4版（？）起自动检测您试图插入的元素（使用append（）、prepend（）、before（）或after（）方法中的任何一种）是否是<tr>，并将其插入到表中的第一个<tbody>中，如果不存在，则将其包装到新的<tbody中。
因此，是的，您的示例代码是可以接受的，并且可以与jQuery1.4+一起工作。；）
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
