在jQuery中,可以使用一些方法來實現表格的增刪改查功能。下面是一個簡單的示例:
HTML代碼:
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>20</td>
<td><button class="edit">編輯</button> <button class="delete">刪除</button></td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td><button class="edit">編輯</button> <button class="delete">刪除</button></td>
</tr>
</tbody>
</table>
jQuery代碼:
$(document).ready(function() {
// 添加數據
$("#myTable").on("click", "#addBtn", function() {
var name = $("#nameInput").val();
var age = $("#ageInput").val();
var newRow = $("<tr><td>" + name + "</td><td>" + age + "</td><td><button class='edit'>編輯</button> <button class='delete'>刪除</button></td></tr>");
$("#myTable tbody").append(newRow);
});
// 刪除數據
$("#myTable").on("click", ".delete", function() {
$(this).closest("tr").remove();
});
// 編輯數據
$("#myTable").on("click", ".edit", function() {
var name = $(this).closest("tr").find("td:eq(0)").text();
var age = $(this).closest("tr").find("td:eq(1)").text();
$("#nameInput").val(name);
$("#ageInput").val(age);
$(this).closest("tr").remove();
});
// 搜索數據
$("#searchBtn").click(function() {
var searchInput = $("#searchInput").val();
$("#myTable tbody tr").hide();
$("#myTable tbody tr:contains('" + searchInput + "')").show();
});
// 重置搜索
$("#resetBtn").click(function() {
$("#searchInput").val("");
$("#myTable tbody tr").show();
});
});
在上面的示例中,我們使用了jQuery的on()
方法來處理動態添加的按鈕的點擊事件。通過選擇器和事件委托,我們可以處理多個按鈕的點擊事件。
添加數據:點擊“添加”按鈕,獲取輸入框中的值,創建一個新的行元素,并將其添加到表格的tbody中。
刪除數據:點擊“刪除”按鈕,使用closest()
方法找到最近的tr元素,然后使用remove()
方法將其從DOM中移除。
編輯數據:點擊“編輯”按鈕,使用closest()
和find()
方法找到最近的tr元素,并獲取tr中對應的姓名和年齡的文本值。然后將這些值設置到輸入框中,并將行元素從DOM中移除。
搜索數據:點擊“搜索”按鈕,獲取輸入框中的值,使用contains()
選擇器來篩選出包含搜索關鍵字的行,并使用show()
和hide()
方法顯示/隱藏行。
重置搜索:點擊“重置”按鈕,將輸入框的值清空,并顯示所有行元素。
以上示例中的代碼只是一個簡單的示例,可以根據實際需求進行擴展和修改。