jQuery合并单元格方法

最新推荐文章于 2021-11-19 15:55:14 发布

止境

最新推荐文章于 2021-11-19 15:55:14 发布

阅读量3.3k

点赞数 4

分类专栏： JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/hc1104/article/details/8673670

版权

JavaScript 同时被 2 个专栏收录

15 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格数据合并方法，该方法能够自动检测并合并表格中指定列的重复数据，通过隐藏重复单元格并设置rowspan属性来实现视觉上的合并效果。

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

当列中相同内容向下合并单元格，效果如图。

在页面中中引入jQuery

  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

添加合并单元格的方式

  <script type="text/javascript">
  jQuery.fn.rowspan = function(colIdx) {//封装jQuery小插件用于合并相同内容单元格(列)
		return this.each(function(){ 
			var that; 
			$('tr', this).each(function(row) { 
				$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) { 
					if (that!=null && $(this).html() == $(that).html()) { 
						rowspan = $(that).attr("rowSpan"); 
						if (rowspan == undefined) { 
							$(that).attr("rowSpan",1); 
							rowspan = $(that).attr("rowSpan"); 
						} 
						rowspan = Number(rowspan)+1; 
						$(that).attr("rowSpan",rowspan); 
						$(this).hide(); 
					} else { 
						that = this; 
					} 
				}); 
			}); 
		}); 
	} 
	
 	$(function(){//第一列内容相同的进行合并
		$("#equipClassifySummary").rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值
	});
  </script>

在body中加入表格用于查看效果

<body> 
			<table border="1" id="equipClassifySummary">
				<tr>
					<th>设备大类</th>
					<th>设备小类</th>
					<th>资产数量</th>
					<th>资产价值</th>
				</tr>
				
						<tr>
							<td align="center">专用设备</td>
							<td align="center"></td>
							<td align="center">3153</td> 
							<td align="right">51,243,408.5</td>
						</tr>

						<tr>
							<td align="center">一般设备</td>
							<td align="center">家具用具及其他类</td>
							<td align="center">3657</td> 
							<td align="right">1,902,795</td>
						</tr>
						

						<tr>
							<td align="center">一般设备</td>
							<td align="center">通用设备</td>
							<td align="center">21</td> 
							<td align="right">1,496,367</td>
						</tr
				
						><tr>
							<td align="center">一般设备</td>
							<td align="center">交通运输设备</td>
							<td align="center">9</td> 
							<td align="right">1,100,808</td>
						</tr>
						
						<tr>
							<td align="center">一般设备</td>
							<td align="center">电气设备</td>
							<td align="center">270</td> 
							<td align="right">1,118,284</td>
						</tr>
						

						<tr>
							<td align="center">一般设备</td>
							<td align="center">电子产品及通讯设备</td>
							<td align="center">1283</td> 
							<td align="right">6,443,346.95</td>
						</tr>
						
						<tr>
							<td align="center"></td>
							<td align="center"></td>
							<td align="center">5240</td> 
							<td align="right">12,061,600.95</td>
						</tr>
						
						<tr>
							<td align="center">其他设备</td>
							<td align="center">其他</td>
							<td align="center">326</td> 
							<td align="right">148,226</td>
						</tr>
						
						<tr>
							<td align="center">其他设备</td>
							<td align="center">仪器仪表及量具</td>
							<td align="center">35</td> 
							<td align="right">618,720</td>
						</tr>
						
						<tr>
							<td align="center"></td>
							<td align="center"></td>
							<td align="center">361</td> 
							<td align="right">766,946</td>
						</tr>
						
						<tr>
							<td align="center"></td>
							<td align="center"></td>
							<td align="center">8754</td> 
							<td align="right">64,071,955.45</td>
</tr></table>