如何在 jQuery 中新增表格行

Sundeep Dawadi 2023年1月30日 2020年10月15日
  1. 在 jQuery 中 append()/prepend() 新增錶行
  2. 使用 JavaScript 新增錶行
如何在 jQuery 中新增表格行

在當今的 HTML 表元素中,有各種內部元素,如 tbodytheadtfoot 等,用來包含資料行。

<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>