基于jQuery实现表格行删除与序号重排
作者:白露时间:2026-10-30 18:23:05浏览:231
本文介绍利用jQuery实现表格行的选中删除及后续序号自动重排功能。通过选择器定位勾选行,执行DOM移除操作后,遍历剩余行并更新指定列的显示序号,确保数据展示顺序与逻辑顺序一致。
jQuery实现表格行删除与序号重排
首先,使用jQuery选择器定位并选中需要处理的表格行。
var cks = $("#indicator_table").find("input[type='checkbox']:checked");
接着,弹出确认删除的对话框,并为对话框中的“确定”按钮绑定一个名为delInd()的事件处理函数。
在页面逻辑中,先将选中的那一行通过remove方法或清空html内容为空字符串的方式移除。
$("#indicator_table").find("input[type='checkbox']:checked").each(function(i, o){
// 获取checkbox所在行的顺序
n = $(this).parents("tr").index();
$("#indicator_table").find("tr:eq(" + n + ")").remove();
});
$("#deleteModal").modal("hide");
随后,对剩余的表格行进行重新排序。这需要再次使用jQuery选择器选中表格的所有行,并通过循环遍历为每行赋值新的序号。
$("#indicator_table").find("tr").each(function(i){
$(this).find("td").eq(10).find("a").text(i+1);
});
以上介绍了利用JavaScript和jQuery实现页面表格行删除并重新排序的具体方法,希望能为读者提供帮助。如有疑问欢迎留言,小编会及时回复。感谢大家的支持。
作者最新文章
AOS.js 动画不触发怎么办?排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成:分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南:Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19
