jquery动态合并单元格（根据主列合并）

最新推荐文章于 2024-03-17 17:53:20 发布

原创最新推荐文章于 2024-03-17 17:53:20 发布 · 599 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

UI设计专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的表格数据合并方法，通过对相同数据的行进行合并，并设置rowSpan属性来达到减少视觉冗余的目的。该方法适用于需要展示大量重复数据的场景，通过隐藏重复项并调整单元格跨度来优化显示效果。

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

var start_row ;
var row_num = 0;
$("#userTable tr").each(function(i){
	if(i==0){
		start_row = $(this);
	}else{
		if($(this).find("td:eq(1)").text() == start_row.find("td:eq(1)").text()){
			row_num ++ ;
			$(this).find("td:eq(0)").hide(); 
			$(this).find("td:eq(1)").hide(); 
			$(this).find("td:eq(8)").hide(); 
			$(this).find("td:eq(9)").hide(); 
			$(this).find("td:eq(10)").hide(); 
			
			start_row.find("td:eq(0)").attr("rowSpan",row_num); 
			start_row.find("td:eq(1)").attr("rowSpan",row_num); 
			
			start_row.find("td:eq(8)").attr("rowSpan",row_num); 
			start_row.find("td:eq(9)").attr("rowSpan",row_num); 
			start_row.find("td:eq(10)").attr("rowSpan",row_num); 
			
			
			
		}else{
			start_row = $(this);
			row_num ++ ;
		}
	}
	
});