中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

jquery怎么實現表格增刪改查功能

小億
158
2023-08-05 01:58:26
欄目: 編程語言

在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()方法顯示/隱藏行。

重置搜索:點擊“重置”按鈕,將輸入框的值清空,并顯示所有行元素。

以上示例中的代碼只是一個簡單的示例,可以根據實際需求進行擴展和修改。

0
旌德县| 新巴尔虎左旗| 敦化市| 洛宁县| 乡城县| 兴隆县| 肃南| 安庆市| 葫芦岛市| 鄂托克前旗| 湘潭县| 西乌珠穆沁旗| 阿城市| 黄陵县| 监利县| 罗城| 晴隆县| 沈阳市| 开封县| 汾阳市| 邓州市| 江达县| 河间市| 邵武市| 隆子县| 盐亭县| 延川县| 民勤县| 博乐市| 中卫市| 轮台县| 中西区| 巴中市| 江永县| 建德市| 全椒县| 巨鹿县| 西宁市| 临沭县| 丹东市| 博爱县|