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