91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

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
聂拉木县| 邻水| 东乌珠穆沁旗| 阿图什市| 威远县| 泽普县| 遂宁市| 莱西市| 潍坊市| 河曲县| 湘西| 慈利县| 曲麻莱县| 上蔡县| 玛纳斯县| 罗田县| 筠连县| 图木舒克市| 安乡县| 蓬溪县| 酒泉市| 武定县| 河西区| 马边| 格尔木市| 德阳市| 全南县| 修水县| 河北区| 榆中县| 元阳县| 贵溪市| 亚东县| 江西省| 宜兰市| 社旗县| 互助| 嘉黎县| 浏阳市| 龙井市| 波密县|