js合并单元格并重新排序号_js 表格合并行后序号-CSDN博客

本文链接：https://blog.csdn.net/weixin_38897980/article/details/84876114

本文详细介绍了如何使用JavaScript在表格中进行单元格合并，并在合并后重新排序行号。通过示例代码，展示了如何遍历表格，判断合并条件，设置合并样式，并确保行号在合并单元格后依然正确显示。

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

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		table {border-collapse: collapse;}
		table td {padding:10px 20px;border: 1px solid;}
	</style>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
	<table id="tableList">
		<tr>
			<td>隐藏1</td>
			<td>2</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏2</td>
			<td>3</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏2</td>
			<td>3</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏2</td>
			<td>3</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>4</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>5</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>5</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>5</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>5</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
		<tr>
			<td>隐藏3</td>
			<td>5</td>
			<td>123</td>
			<td>123</td>
			<td>123</td>
		</tr>
	</table>
	<script>
		function hebingxuhao2(tableId,xhTdIndex,hbTdIndex){
			debugger
			var trList = $("#"+tableId).find("tr");
				num = 1,
				htmlNode = "",
				hbTdArraryNode=null;
			trList.each(function(index,thisTr){
				var thisTr = $(this);
				var xhTd = thisTr.find("td").eq(xhTdIndex);
				var thisHtml = thisTr.find("td").eq(0).html();
				var hbTdArrary = hbTdIndex.map(function(thisTd,index){
					return thisTr.find("td").eq(thisTd); 
				})
				if(htmlNode == thisHtml){
					if(!hbTdArraryNode[0].attr("rowspan")) {
						var rowspan = 2;
					} else {
						var rowspan = Number(hbTdArraryNode[0].attr("rowspan")) + 1;
					}
					hbTdArraryNode.forEach(function(item,index){
						item.attr("rowspan", rowspan);
						hbTdArrary[index].addClass("hebing");
					})
				}else{
					htmlNode = thisHtml;
					hbTdArraryNode = hbTdArrary;
				}
				if(!xhTd.hasClass("hebing")){
					xhTd.html(num++);
				}
			})
			$(".hebing").remove();
		}
		
		hebingxuhao2("tableList",1,[1,2,4])
		
	</script>
</body>