基于jQuery实现表格行删除与序号重排

作者:白露

时间:2026-10-30

浏览:230

本文介绍利用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实现页面表格行删除并重新排序的具体方法,希望能为读者提供帮助。如有疑问欢迎留言,小编会及时回复。感谢大家的支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章