ajax获取数据后动态生产的表格如何删除指定行
在通过ajax获取后台数据并将其以表格形式展示到前端页面后，如何实现单击指定行就同时删除该行和数组中的数据呢？
首先，将获取数据并生成表格的代码封装成一个方法，如：
function createtable(tbody, data) {
// 清空tbody
tbody.empty();
// 遍历数据，生成表格行
data.foreach(row => {
tbody.append(`
<tr>
<td>${row.pnumber}</td>
<td>${row.products}</td>
<td>件</td>
<td>${row.pprice}</td>
<td>${row.pnum}</td>
<td><a href="javascript:;" onclick="del(this)">删除</a></td>
</tr>
`);
});
}在点击删除按钮时，使用this对象传递当前单击的元素，并调用del函数。del函数负责删除该行及其在数组中的数据，再重新创建表格：
function del(row) {
// 获取数据行所在的行编号
let index = $(row).closest("tr").index();
// 从数组中删除对应数据
arry.splice(index, 1);
// 重新创建表格
createTable(tbody, arry);
}通过将获取数据和生成表格的逻辑封装成方法，我们可以更灵活地控制表格的显示和更新，从而实现单击删除指定行和数组数据的功能。
以上就是Ajax表格数据：如何删除指定行及对应数组数据？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
