jquery表格增刪該查功能

隨著網路科技的不斷發展，網頁應用的重要性日益增加。而表格是重要的資訊展示工具，常用於各種管理系統。在我們的程式中需要一個表格來展示數據，同時也需要一個方便的工具來對表格進行增刪改查的操作，這樣可以大大提高我們的工作效率。本文將介紹如何借助jQuery實作表格的增刪改查功能。

首先，需要一個HTML表格。可以使用以下的HTML程式碼建立一個簡單的表格。

 
 
 
编号
 
姓名
 
年龄
 
操作
 
 
 
 
 
1
 
张三
 
25
 
删除
 
 
 
2
 
李四
 
30
 
删除
 
 
 
3
 
王五
 
28
 
删除
 
 
 

接下來，我們需要加入jQuery依賴。

然後，我們可以開始實作增刪改查功能了。

增加功能

為了實現表格的增加功能，我們需要一個表單，讓使用者輸入資料。可以使用以下HTML程式碼建立表單。

 
 姓名：  
 
 年龄：  
 添加 

接下來，在jQuery中加入下面的程式碼。

$("#form-data").submit(function(e) { e.preventDefault(); let name = $("#name").val(); let age = $("#age").val(); let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1; let row = ` ${newId} ${name} ${age} 删除 `; $("#table-data tbody").append(row); $("#form-data")[0].reset(); });

首先，我們使用e.preventDefault()禁止瀏覽器的預設提交行為。然後，我們從表單中取得姓名和年齡，並根據最後一行的編號產生新的編號。然後，我們使用JQuery動態新增一個新的行，並將其附加到表格的末尾。最後，我們呼叫reset()方法將表單欄位的值重設為空。

現在，我們就成功了新增行的功能。

刪除功能

下面我們來實作刪除行的功能。我們可以在表格的HTML程式碼中新增一個刪除按鈕，如下所示：

删除

然後，我們可以使用以下jQuery程式碼來實現刪除資料行的功能。

$("tbody").on("click", ".delete", function() { if (confirm("确定删除这行数据吗？")) { $(this).closest("tr").remove(); } });

首先，我們使用.on()事件監聽器來監聽.delete按鈕的點擊事件，並使用closest()方法取得其最近的祖先元素，即表格行，並使用remove()方法將其刪除。在此之前，我們使用confirm()方法向用戶確認是否確實要刪除這一行數據，從而避免用戶誤刪數據。

修改功能

下面我們來實作修改行資料的功能。同樣地，我們將一個「編輯」按鈕新增到表格的每行。

编辑

然後，我們需要為編輯按鈕新增點擊事件監聽器，並在其中建立表單，將原始資料填入表單中，如下所示。

$("tbody").on("click", ".edit", function() { let id = $(this).closest("tr").find("td:first-child").text(); let name = $(this).closest("tr").find("td:nth-child(2)").text(); let age = $(this).closest("tr").find("td:nth-child(3)").text(); let form = ` 
 
 姓名：  
 
 年龄：  
 保存 
`; $(this).closest("tr").html(` ${id} ${form}   `); });

首先，我們使用closest()方法來取得目前編輯按鈕的祖先元素，即表格行，並使用find()方法透過選擇器取得該行的第一個儲存格（即ID）、第二個儲存格（即姓名）和第三個儲存格（即年齡）中的數據，然後將其儲存到變數中。

接著，我們建立一個新的表單，並使用變數中的資料填入該表單中的欄位。最後，我們使用html()方法將表格行的內容替換為表單的HTML程式碼。

對於儲存操作，我們可以使用以下jQuery程式碼來實作。

$("tbody").on("submit", "#form-edit", function(e) { e.preventDefault(); let name = $("#edit-name").val(); let age = $("#edit-age").val(); let id = $(this).closest("tr").find("td:first-child").text(); $(this).closest("tr").html(` ${id} ${name} ${age}  删除 编辑  `); });

首先，我們使用closest()方法來取得目前表單的祖先元素，即表格行，並使用find()方法來取得該行的ID。然後，我們使用html()方法將表單的資料更新到表格行中，並使用「刪除」和「編輯」按鈕重新新增到該行中。最後，我們可以使用reset()方法將表單的欄位重設為空。

查詢功能

最後，我們來實作一個簡單的查詢功能。我們可以在頁面上新增一個文字輸入框，並藉助jQuery過濾表格資料。我們可以使用下列HTML程式碼來建立查詢欄。

  查询 

然後，我們可以使用以下jQuery程式碼來實作查詢功能。

$("#form-search").submit(function(e) { e.preventDefault(); let keyword = $("#search-keyword").val(); $("tbody tr").hide(); $("tbody tr:contains('" + keyword + "')").show(); });

首先，我們使用.submit()方法為表單新增提交事件監聽器，並使用e.preventDefault()禁止預設行為。然後，我們從查詢欄中取得關鍵字，並使用hide()方法將表格的所有行都隱藏起來。最後，我們使用:contains()選擇器，根據關鍵字過濾需要顯示的行，並使用show()方法顯示這些行。

到這裡，我們已經實作了一個基本的jQuery表格增刪改查功能。透過這種方法，使用者可以輕鬆地新增、刪除、修改和查詢表格的數據，大大提高了工作效率。

以上是jquery表格增刪該查功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！