如何在jQuery中新增、編輯和刪除表格行？-html教學-PHP中文網

如何在jQuery中新增、編輯和刪除表格行？

王林

發布： 2023-09-05 21:49:10

轉載

908 人瀏覽過

如何在jQuery中新增、編輯和刪除表格行？

在當今的 Web 開發時代，有效且有效率的表格管理變得非常重要，特別是在處理資料量大的 Web 應用程式時。從表中動態新增、編輯和刪除行的能力可以顯著增強使用者體驗並使應用程式更具互動性。實現這一目標的一種有效方法是利用 jQuery 的強大功能。 jQuery 提供了許多功能來幫助開發人員執行操作。

表格行

表格行是相互關聯的資料的集合，由 HTML 中的

元素表示。它用於將表格中的單元格（由元素表示）分組在一起。每個元素用於定義表中的一行，對於多屬性表，通常包含一個或多個元素。

文法

$(selector).append(content)

登入後複製

jQuery 中的append() 方法用於將內容新增至元素的末尾，無論是單一元素還是一組元素。內容可以是文字、HTML 或其他元素。

其中內容可以是 HTML 字串、DOM 元素或 jQuery 物件。

$(selector).find(selectCondition)

登入後複製

jQuery 中的 find() 函數用於搜尋和選擇所選元素的後代元素。它搜尋所選元素的整個 DOM 樹，並傳回新 jQuery 物件中的所有匹配元素。

其中 selectCondition 是表示要選擇的元素的字串，例如類別或標記名稱。

$(selctor).remove()

登入後複製

jQuery 中的remove() 方法用於從DOM（文檔物件模型）中刪除選取的元素及其子元素。

方法

為了使用 jQuery 對錶行執行操作，我們將結合使用 jQuery 方法和 DOM 操作技術。讓我們分別討論我們將在本文中看到的所有三個操作，即新增、編輯和刪除行。因此，談論第一個操作，即在表中新增一行，我們將使用上面提到的append()方法。為此，首先我們將建立一個新的元素，然後使用append() 方法將其插入到表中。

然後，我們將用新的元素填入新行，並使用 text() 或 html() 方法為其賦值。現在進行第二個操作，即修改表格行，我們首先使用 find() 方法選擇行中相關的元素，然後使用 text() 或 html() 方法修改它們內容。最後，要執行最終操作，即刪除表行，我們只需在要刪除的行上使用remove()方法即可。

但是，在我們開始解釋所有部分之前，首先我想提醒您注意，為了將 jQuery 包含到我的網頁中，我使用了 CDN，可以在 script 標籤中看到它。

現在回到程式碼，我們先討論 body 元素。正文包含一個具有兩行和兩列的虛擬表。除此之外，它還包含三個標記為「新增行」、「刪除行」和「編輯行」的按鈕，稍後我們將在腳本中使用它們來將所需的功能添加到程式碼中。我還使用 CSS 添加了一些樣式來美化一下表格行的外觀。最後在腳本部分，我使用jQuery編寫了所有功能的邏輯。我利用了上述所有函數來完成此功能。此功能已實作使用 jQuery 事件處理程序，點擊對應按鈕時會觸發該事件處理程序。

範例

以下是我們將在本範例中使用的完整程式碼 -

<!DOCTYPE html>
<html>
<head>
   <title>How to Add Edit and Delete Table Row in jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      table{
         border: 2px solid black
      }
      td{
         padding: 2px
      }
   </style>
</head>
<body>
   <h4>How to Add Edit and Delete Table Row in jQuery? </h4>
   <table id="my-table">
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
   </table>
   <br>
   <button id="add-btn">Add Row</button>
   <button id="remove-btn">Remove Row</button>
   <button id="edit-btn">Edit Row</button>
   <script>
      $(document).ready(function(){
         $("#add-btn").click(function(){
            var newRow = "<tr><td>New Row</td><td>Data</td></tr>";
            $("#my-table").append(newRow);
         });
         $("#remove-btn").click(function(){
            $("#my-table tr:last").remove();
         });
         $("#edit-btn").click(function(){
            let rows=$("#my-table").find("tr")
            let idx=Math.floor(Math.random()*rows.length)
            rows.eq(idx).find("td").eq(0).text("Edited Row")
         });
      });
   </script>
</body>
</html>

登入後複製