用jquery代码实现表格行列的增删操作（每行编号随之修改）_jquery 连续序号删除一个后续的序号和自序号自动往前一位-优快云博客

本文链接：https://blog.youkuaiyun.com/felixkiki/article/details/50452807

本文介绍如何使用jQuery插件在jsp页面中实现表格行的增加与删除功能，包括点击按钮添加新行，自动调整编号连续性；以及删除行后自动调整后续行号，确保编号连贯。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标效果：

1.点击addRow按纽实现行的增加，并且编号连续呈増序。

2.点击deleteRow按纽实现行的删除，并且被删行对象后面的行编号与被删对象前面的行编号能连贯起来。（下示例从上图中图删除了第三行之后的效果）

工具：

1. jquery插件

2. jsp页面中导入jquery插件并创建表格

<script type="text/javascript"  src="${pageContext.request.contextPath }/script/jquery-1.8.3.js"></script>

<body>
	<center>
	<table id="tb" border="1px" cellpadding="1px" cellspacing="0px">
		<tr>
			<td colspan="3">
				<input type="button" id="add" value="addRow"  onclick="addRow()">
			</td>
		</tr>
		
	</table>
	</center>
</body>

代码实现：

<script type="text/javascript">
	//实现增加行
	function addRow(){
		//获取当前表格的行数 （注意这里的初始值为1，因为addRow按纽是第一行，而第一行数据的编号也应该为1）
		//#tb 通过表格的id获取表格对象 再通过父子关系中的tr 来定位到tr对象
		var tempRows = $("#tb tr").size();
		var name = "felix";
		//创建新的一行
		$tr = $("<tr></tr>");
		//创建新的一行的第一列，即第一个td，也就是行编号这个单元格(并设置id属性，为后面的删除操作中需要定位到具体哪一行做准备)
		$tdNum = $("<td id=\""+tempRows+"\"></td>");
		//text()方法为jquery对象的文本内容赋值。
		//第一次增加则第一行的编号为1，第二次增加的时候已经有两行了，所以tempRows的值为2，刚好第二行数据编号也应该为2
		$tdNum.text(tempRows);
		//创建第二列，即第二个td，也就是名字这个单元格
		$tdName = $("<td></td>");
		$tdName.text(name);
		//创建第三列，即第三个td，也就是删除按钮这个单元格
		$tdDelete = $("<td></td>");
		//创建删除按钮
		//在删除function中传入this关键字，即当前对象，也就是这一行的这一个删除按钮
		$deleteButton = $("<input type='button' value='deleteRow' onclick='deleteRow(this)'>");
		
		//将删除按钮添加到第三列，即第三个td(单元格)里面去
		$tdDelete.append($deleteButton);
		//依次将三个td对象(行编号、名字、删除按钮)添加到tr对象里面去
		$tr.append($tdNum);
		$tr.append($tdName);
		$tr.append($tdDelete);
		//最后将已经囊括了三个td对象的tr对象添加到表格里面去
		$("#tb").append($tr);
	}
	
	//a代表需要传递的参数
	function deleteRow(a){
		//删除行
		//通过传递过来的this关键字，即当前操作对象，定位到删除按钮，
		//再通过parent()定位到所在的td对象，进而再通过parent()定位到td对象所在的tr对象，最后将这个tr对象删除
		$(a).parent().parent().remove();
		//获取当前要删除的行的编号
		//parent()定位到td对象，两次prev()依次定位到第二个td和第一个td，
		//最终text()获取第一个td的数据，即行编号
		var rowNum = $(a).parent().prev().prev().text();
		//获取总行数
		//(注意是删除后的总行数，与下面for循环中的<=相对应，若在删除操作之前获取总行数，则在for循环应将结束循环的条件定义为i<temRows)
		var temRows = $("#tb tr").size();
		//i=parseInt(rowNum)+1    ： 从下一行(即被删除行的后面一行)开始逐行修改编号  
		//前面的行编号不动，但后面的编号需要减1
		//pareseInt方法将字符串数据变为int类型
		for(i=parseInt(rowNum)+1;i<=temRows;i++){
			//通过id选择器获取到具体的哪一行的第一列，并将第一列，即行编号这个单元格中的数据减1
			$("#"+i).text(i-1);
			//同时通过attr("属性名",属性值)方法将其id属性也减1
			$("#"+i).attr("id",i-1);
		}
	}
</script>

只要在路上，就终会成为大牛！