如何在 jQuery 中添加表格行
Sundeep Dawadi
2023年1月30日
2020年10月15日
在当今的 HTML 表元素中,有各种内部元素,如 tbody
、thead
、tfoot
等,用来包含数据行。
<table id="test">
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
这就导致了在 DOM 中插入表格行的时候需要精确,jQuery 自带了两种 DOM 内、外插入的方法来添加元素。
在 jQuery 中 append()
/prepend()
添加表行
如果要在表体中使用 jQuery 添加一行,我们可以使用 DOM 内部的 append()
或 prepend()
的插入方法,在建议元素的开始或结束处添加一个元素。这里我们将选择 table
元素中的 tbody
元素,用 id="test"
在它后面添加一行。
<script>
$("#test>tbody").append("<tr><td>Test Row Append</td></tr>");
//adding row to end and start
$("#test>tbody").prepend("<tr><td>Test Row Prepend</td></tr>");</script>
运行下面的脚本后,新的 HTML 就会变成下面的样子。
<table id="test">
<tbody>
<tr><td>Test Row Prepend</td></tr>
<tr><td>Foo</td></tr>
<tr><td>Test Row Append</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
这种在 jQuery 中添加一行的方法可以通过使用 appendto()
和 prependto()
方法来实现。
<script>
$("<tr><td>Test Row Append</td></tr>").appendto("#test>tbody");
$("<tr><td>Test Row Prepend</td></tr>").prependto("#test>tbody");
</script>
在 jQuery 中使用外部 DOM 插入插入表行
jQuery 自带 .after()
和 .before()
方法,分别在指定元素之后和之前插入元素。我们可以利用这些方法在不同的表格位置精确地添加表行。
<table>
<tbody>
<tr><td> Item First </td></tr>
<tr><td> Item Last </td></tr>
</tbody>
</table>
<script>
$("table tbody:nth-child(1)").after("<tr><td> Item Second </td></tr>");
//adding second item after 1st item
$("table tbody:last-child").before("<tr><td> Item Just Before Last</td></tr>");
//adding an item before last item
<script>
使用 JavaScript 添加表行
另外,它也有一个本地的 JavaScript 方法,使用 insertRow()
函数向表中添加一行。
<table id="test">
<tr>
<td>row1 column1</td>
<td>row1 column2</td>
</tr>
</table>
<script>
function addrow(){
var table = document.getElementById("test");
var row = table.insertRow(0);
//this adds row in 0 index i.e. first place
row.innerHTML = "<td>row0 column1</td><td>row0 column2</td>";
}
</script>