我使用jQuery向表中添加一行作为最后一行。
我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？
当前回答
var html = $('#myTableBody').html();
html += '<tr><td>my data</td><td>more data</td></tr>';
$('#myTableBody').html(html);
or
$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>');
其他回答
你建议的方法并不一定能给你带来你想要的结果——例如，如果你有一个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>');
您可以在after（）方法中包含任何内容，只要它是有效的HTML，包括上面示例中的多行。
更新：在最近使用此问题进行活动后，重新审视此答案。无眼是一个很好的评论，即DOM中总会有一个tbody；这是正确的，但前提是至少有一行。如果没有行，除非您自己指定了一行，否则不会有tbody。
DaRKoN_建议在tbody之后添加内容，而不是在最后一个tr之后添加内容。这解决了没有行的问题，但仍然不可靠，因为理论上可以有多个tbody元素，行将添加到每个元素中。
权衡一切，我不确定是否有一个单一的单线解决方案能够解决每一种可能的情况。您需要确保jQuery代码与标记相符。
我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody，即使它没有行。在此基础上，您可以使用以下方法，无论您有多少行（也可以考虑多个tbody元素）都可以使用：
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
上面的答案非常有用，但当学生参考此链接从表单中添加数据时，他们通常需要一个示例。
我想提供一个示例，从from获取输入，并使用.after（）使用字符串插值将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>`);
}
函数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>表{字体系列：arial，sans-serif；边界塌陷：塌陷；宽度：100%；}td，第{边框：1px实心#dddddd；文本对齐：左侧；填充：8px；}tr：第n个孩子（偶数）{背景色：#dddddd；}</style></head><body><表单><input-type='text'name='studentname'/><input-type='text'name='studentmark'/><input-type='button'onclick=“add（）”value=“add new”/></form><table id=“学生”><thead><th>名称</th><th>标记</th></thead></table></body></html>
在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。
我希望这很有帮助。
<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>
如果要在＜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>");
我是这样解决的。
使用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>
