jquery怎么实现表格增删改查功能

在jQuery中，可以使用一些方法来实现表格的增删改查功能。下面是一个简单的示例：

HTML代码：

姓名
年龄
操作




张三
20
编辑 删除


李四
25
编辑 删除

jQuery代码：

$(document).ready(function() {
// 添加数据
$("#myTable").on("click", "#addBtn", function() {
var name = $("#nameInput").val();
var age = $("#ageInput").val();
var newRow = $("" + name + "" + age + "编辑 删除");
$("#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()方法显示/隐藏行。

重置搜索：点击“重置”按钮，将输入框的值清空，并显示所有行元素。

以上示例中的代码只是一个简单的示例，可以根据实际需求进行扩展和修改。