jquery表格增删该查功能

随着互联网技术的不断发展，网页应用的重要程度日益增加。而表格是一个重要的信息展示工具，常用于各种管理系统中。在我们的程序中需要一个表格来展示数据，同时也需要一个方便的工具来对表格进行增删改查的操作，这样可以大大提高我们的工作效率。本文将介绍如何借助jQuery实现表格的增删改查功能。

首先，需要一个HTML表格。可以使用以下的HTML代码创建一个简单的表格。

 
 
 
编号
 
姓名
 
年龄
 
操作
 
 
 
 
 
1
 
张三
 
25
 
删除
 
 
 
2
 
李四
 
30
 
删除
 
 
 
3
 
王五
 
28
 
删除
 
 
 

接下来，我们需要添加jQuery依赖。

然后，我们可以开始实现增删改查功能了。

增加功能

为了实现表格的增加功能，我们需要一个表单，让用户输入数据。可以使用以下HTML代码创建表单。

 
 姓名：  
 
 年龄：  
 添加 

接下来，在jQuery中添加下面的代码。

$("#form-data").submit(function(e) { e.preventDefault(); let name = $("#name").val(); let age = $("#age").val(); let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1; let row = ` ${newId} ${name} ${age} 删除 `; $("#table-data tbody").append(row); $("#form-data")[0].reset(); });

首先，我们使用e.preventDefault()禁止浏览器的默认提交行为。然后，我们从表单中获取姓名和年龄，并根据最后一行的编号生成新的编号。然后，我们使用JQuery动态添加一个新的行，并将其附加到表格的末尾。最后，我们调用reset()方法将表单字段的值重置为空。

现在，我们就成功了添加行的功能。

删除功能

下面我们来实现删除行的功能。我们可以在表格的HTML代码中添加一个删除按钮，如下所示：

删除

然后，我们可以使用以下jQuery代码来实现删除数据行的功能。

$("tbody").on("click", ".delete", function() { if (confirm("确定删除这行数据吗？")) { $(this).closest("tr").remove(); } });

首先，我们使用.on()事件监听器来监听.delete按钮的点击事件，并使用closest()方法获取其最近的祖先元素，即表格行，并使用remove()方法将其删除。在此之前，我们使用confirm()方法向用户确认是否确实要删除这一行数据，从而避免用户误删数据。

修改功能

下面我们来实现修改行数据的功能。同样地，我们添加一个“编辑”按钮到表格的每行中。

编辑

然后，我们需要为编辑按钮添加点击事件监听器，并在其中创建一个表单，将原始数据填入表单中，如下所示。

$("tbody").on("click", ".edit", function() { let id = $(this).closest("tr").find("td:first-child").text(); let name = $(this).closest("tr").find("td:nth-child(2)").text(); let age = $(this).closest("tr").find("td:nth-child(3)").text(); let form = ` 
 
 姓名：  
 
 年龄：  
 保存 
`; $(this).closest("tr").html(` ${id} ${form}   `); });

首先，我们使用closest()方法获取当前编辑按钮的祖先元素，即表格行，并使用find()方法通过选择器获取该行的第一个单元格（即ID）、第二个单元格（即姓名）和第三个单元格（即年龄）中的数据，然后将其存储到变量中。

接着，我们创建一个新的表单，并使用变量中的数据填充该表单中的字段。最后，我们使用html()方法将表格行的内容替换为表单的HTML代码。

对于保存操作，我们可以使用以下jQuery代码来实现。

$("tbody").on("submit", "#form-edit", function(e) { e.preventDefault(); let name = $("#edit-name").val(); let age = $("#edit-age").val(); let id = $(this).closest("tr").find("td:first-child").text(); $(this).closest("tr").html(` ${id} ${name} ${age}  删除 编辑  `); });

首先，我们使用closest()方法获取当前表单的祖先元素，即表格行，并使用find()方法获取该行的ID。然后，我们使用html()方法将表单的数据更新到表格行中，并使用“删除”和“编辑”按钮重新添加到该行中。最后，我们可以使用reset()方法将表单的字段重置为空。

查询功能

最后，我们来实现一个简单的查询功能。我们可以在页面上添加一个文本输入框，并借助jQuery过滤表格数据。我们可以使用以下HTML代码来创建查询栏。

  查询 

然后，我们可以使用以下jQuery代码来实现查询功能。

$("#form-search").submit(function(e) { e.preventDefault(); let keyword = $("#search-keyword").val(); $("tbody tr").hide(); $("tbody tr:contains('" + keyword + "')").show(); });

首先，我们使用.submit()方法为表单添加提交事件监听器，并使用e.preventDefault()禁止默认行为。然后，我们从查询栏中获取关键字，并使用hide()方法将表格的所有行都隐藏起来。最后，我们使用:contains()选择器，根据关键字过滤需要显示的行，并使用show()方法显示这些行。

到这里，我们已经实现了一个基本的jQuery表格增删改查功能。通过这种方法，用户可以很方便地添加、删除、修改和查询表格的数据，大大提高了工作效率。

Atas ialah kandungan terperinci jquery表格增删该查功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!