資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 新增、編輯和刪除表格行？
在當今的 Web 開發時代，有效且高效地管理表格變得越來越重要，尤其是在處理資料密集型 Web 應用程式時。能夠動態地向表格新增、編輯和刪除行可以顯著增強使用者體驗，並使應用程式更加互動式。實現這一目標的一種有效方法是利用 jQuery 的強大功能。jQuery 提供了許多功能，可以幫助開發人員執行這些操作。
表格行
表格行，即相互關聯的資料集合，在 HTML 中由 <tr> 元素表示。它用於將單元格（由 <td> 元素表示）組合到表格中。每個 <tr> 元素用於定義表格中的一行，並且通常包含一個或多個 <td> 元素用於多屬性表格。
語法
$(selector).append(content)
jQuery 中的 append() 方法用於將內容新增到元素的末尾，無論它是一個元素還是一組元素。內容可以是文字、HTML 或其他元素。
其中 content 可以是 HTML 字串、DOM 元素或 jQuery 物件。
$(selector).find(selectCondition)
jQuery 中的 find() 函式用於搜尋和選擇所選元素的後代元素。它遍歷所選元素的整個 DOM 樹，並在新的 jQuery 物件中返回所有匹配的元素。
其中 selectCondition 是一個字串，表示您要選擇的元素，例如類名或標籤名。
$(selctor).remove()
jQuery 中的 remove() 方法用於從 DOM（文件物件模型）中刪除選定的元素及其子元素。
方法
為了使用 jQuery 對錶格行執行操作，我們將使用 jQuery 方法和 DOM 操作技術的混合。讓我們分別討論本文中將要看到的三個操作，即新增、編輯和刪除行。所以，談到第一個操作，即向表格新增新行，我們將使用上面提到的 append() 方法。為此，我們首先將構建一個新的 <tr> 元素，然後使用 append() 方法將其插入表格。
之後，我們將使用新的 <td> 元素填充新行，並使用 text() 或 html() 方法為其分配值。現在談談第二個操作，即修改表格行，我們將首先使用 find() 方法選擇行中相關的 <td> 元素，然後使用 text() 或 html() 方法修改其內容。最後，要執行最終操作，即刪除表格行，我們只需對要刪除的行使用 remove() 方法。
但是，在我們開始解釋所有部分之前，我想先提醒您，為了將 jQuery 包含到我的網頁中，我使用了 CDN，這可以在 script 標籤中看到。
現在回到程式碼，讓我們首先討論 body 元素。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>
結論
在本文中，我們介紹了 jQuery 中的一些方法，它們分別是 append()、find() 和 remove()。我們瞭解瞭如何將 jQuery 提供的這些方法與一些 DOM 操作技術結合起來，動態地新增、編輯和刪除表格行。
2K+ 閱讀量
