随着互联网技术的不断发展，网页应用的重要程度日益增加。而表格是一个重要的信息展示工具，常用于各种管理系统中。在我们的程序中需要一个表格来展示数据，同时也需要一个方便的工具来对表格进行增删改查的操作，这样可以大大提高我们的工作效率。本文将介绍如何借助jQuery实现表格的增删改查功能。
首先，需要一个HTML表格。可以使用以下的HTML代码创建一个简单的表格。
<table id="table-data">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
<td><button class="delete">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
<td><button class="delete">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>28</td>
<td><button class="delete">删除</button></td>
</tr>
</tbody>
</table>接下来，我们需要添加jQuery依赖。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>然后，我们可以开始实现增删改查功能了。
增加功能
为了实现表格的增加功能，我们需要一个表单，让用户输入数据。可以使用以下HTML代码创建表单。
<form id="form-data">
<div>
<label for="name">姓名：</label>
<input type="text" id="name" required>
</div>
<div>
<label for="age">年龄：</label>
<input type="number" id="age" required>
</div>
<button type="submit">添加</button>
</form>接下来，在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 = `<tr>
<td>${newId}</td>
<td>${name}</td>
<td>${age}</td>
<td><button class="delete">删除</button></td>
</tr>`;
$("#table-data tbody").append(row);
$("#form-data")[0].reset();
});首先，我们使用e.preventDefault()禁止浏览器的默认提交行为。然后，我们从表单中获取姓名和年龄，并根据最后一行的编号生成新的编号。然后，我们使用JQuery动态添加一个新的行，并将其附加到表格的末尾。最后，我们调用reset()方法将表单字段的值重置为空。
现在，我们就成功了添加行的功能。
删除功能
下面我们来实现删除行的功能。我们可以在表格的HTML代码中添加一个删除按钮，如下所示：
<td><button class="delete">删除</button></td>然后，我们可以使用以下jQuery代码来实现删除数据行的功能。
$("tbody").on("click", ".delete", function() {
if (confirm("确定删除这行数据吗？")) {
$(this).closest("tr").remove();
}
});首先，我们使用.on()事件监听器来监听.delete按钮的点击事件，并使用closest()方法获取其最近的祖先元素，即表格行，并使用remove()方法将其删除。在此之前，我们使用confirm()方法向用户确认是否确实要删除这一行数据，从而避免用户误删数据。
修改功能
下面我们来实现修改行数据的功能。同样地，我们添加一个“编辑”按钮到表格的每行中。
<td><button class="edit">编辑</button></td>然后，我们需要为编辑按钮添加点击事件监听器，并在其中创建一个表单，将原始数据填入表单中，如下所示。
$("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 = `
<form id="form-edit">
<div>
<label for="edit-name">姓名：</label>
<input type="text" id="edit-name" value="${name}" required>
</div>
<div>
<label for="edit-age">年龄：</label>
<input type="number" id="edit-age" value="${age}" required>
</div>
<button type="submit">保存</button>
</form>`;
$(this).closest("tr").html(`
<td>${id}</td>
<td>${form}</td>
<td></td>
<td></td>
`);
});首先，我们使用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(`
<td>${id}</td>
<td>${name}</td>
<td>${age}</td>
<td>
<button class="delete">删除</button>
<button class="edit">编辑</button>
</td>
`);
});首先，我们使用closest()方法获取当前表单的祖先元素，即表格行，并使用find()方法获取该行的ID。然后，我们使用html()方法将表单的数据更新到表格行中，并使用“删除”和“编辑”按钮重新添加到该行中。最后，我们可以使用reset()方法将表单的字段重置为空。
查询功能
最后，我们来实现一个简单的查询功能。我们可以在页面上添加一个文本输入框，并借助jQuery过滤表格数据。我们可以使用以下HTML代码来创建查询栏。
<form id="form-search">
<input type="text" id="search-keyword" placeholder="请输入姓名搜索" required>
<button type="submit">查询</button>
</form>然后，我们可以使用以下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表格增删改查功能。通过这种方法，用户可以很方便地添加、删除、修改和查询表格的数据，大大提高了工作效率。
以上就是jquery表格增删该查功能的详细内容，更多请关注编程网其它相关文章！
