作為前端開發常用的JavaScript函式庫，jQuery在DOM操作上有著強烈的實用性與便利性。其中，動態加入HTML元素是jQuery常用的操作之一，特別是在操作表格時，動態增加元素更是不可或缺的。

在jQuery中，增加元素的方法有很多，下面我們將介紹幾種常見的方法供參考。

1、使用append()方法

append()方法可以為現有的元素內部的結尾新增指定的HTML程式碼或元素。因此，我們可以使用append()方法在

中新增元素，範例程式碼如下：

$(document).ready(function(){
   $("button").click(function(){
      $("table").append("<tr><td>新行的单元格 1</td><td>新行的单元格 2</td></tr>");
   });
});

登入後複製

在範例程式碼中，當點擊按鈕時，會在表格中增加一個新的

元素。

2、使用eq()方法動態增加行

eq()方法可以選擇符合元素集合中指定索引位置的元素。因此，我們可以先取得指定的

元素，然後使用eq()方法將其複製並將其插入到表格中，範例程式碼如下：

$(document).ready(function(){
   $("button").click(function(){
      var $cloneRow=$("table tr").eq(0).clone();
      $("table").append($cloneRow);
   });
});

登入後複製

在範例程式碼中，我們將表格中第一個

元素複製後插入到表格中。

3、使用after()方法增加行

after()方法可以在指定元素之後插入指定的HTML程式碼或元素。因此，我們可以將新的

元素插入到表格中的指定位置，範例程式碼如下：

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>");
      $("table tr:eq(0)").after($newRow);
   });
});

登入後複製

在範例程式碼中，我們將新的

元素插入到表格中的第一個元素之後。

4、使用appendTo()方法增加行

appendTo()方法可以將指定的元素插入到另一個指定元素的內部結尾位置。因此，我們可以先建立新的

元素並將其插入到文件中，然後使用appendTo()方法將其插入到表格中，範例程式碼如下：

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>").appendTo("table");
   });
});

登入後複製

在範例程式碼中，我們首先創建了一個新的

元素，並將其插入到表格中。

在實際開發中，根據具體需求選擇不同的方法實作增加

元素的操作。無論是哪一種方法，都可以透過jQuery的彈性和便利性，實現HTML文件的動態修改與擴充。同時，我們也要注意在動態新增元素時，合理設定元素的屬性和樣式，以確保頁面的整體美觀。

以上是jquery 增加tr元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php.cn

上一篇：jquery如何使用scrollview 下一篇：ie8 jquery get不支持

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章