新闻资讯

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻资讯列表

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

发布时间:2023-08-07 07:56:44

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

在jQuery中,可使用一些方法来实现表格的增删改查功能。下面是一个简单的示例:
HTML代码:
```html





















姓名年龄操作
张三20
李四25

```
jQuery代码:
```javascript
$(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()`方法显示/隐藏行。
重置搜索:点击“重置”按钮,将输入框的值清空,并显示所有行元素。
以上示例中的代码只是一个简单的示例,可以根据实际需求进行扩大和修改。