Javascript合并表格中具有相同内容的单元格

HTML或者JSP的TABLE需要不同行但是内容相同的单元格进行合并,本文以省市县为例,对表格中的省市进行二级合并,具体的页面代码和样式不再展示,主要介绍JS如何实现TABLE的单元格合并(无需第三方库)。

JS代码如下:

Function mergeTable( ){
	//默认表格首行为表头,从第二行(index=1)开始合并
	var row = 1;
	//col=0第一列,col=1第二列
	var col = 0;
	var provincePos=1;
	var cityPos=1;
	//上次存储的省份值
	var lastProvinceValue = "";
	//上次存储的城市值 
	var lastCityValue = "";
	//本次提取的省份值
	var provinceValue = ""; 
	//本次提取的城市值
	var cityValue = "";
	//获取表格Dom节点
	var table = document.getElementById("cityList");
	//首先判断表格第一行是否有数据(默认第一行没有数据则表格为空,不需要接下来的步骤直接跳出。)
	if("" == table.rows[1].cells[0].innerText)
	{
		//可以直接return,也可以自定义方法。	
	}else{
		//合并省份代码
		for(var i=row; i<table.rows.length; i++){
			provinceValue = table.rows[i].cells[col].innerText; 
			cityValue = table.rows[i].cells[col+1].innerText;
    		if(lastProvinceValue == provinceValue){
        		//合并城市代码
    			if(lastCityValue == cityValue){
        			table.rows[i].deleteCell(col+1); 
        			table.rows[i-cityPos].cells[col+1].rowSpan = table.rows[i-cityPos].cells[col+1].rowSpan+1; 
        			cityPos++; 
	        	}else{ 
	        		lastCityValue = cityValue; 
	        		cityPos=1;
	        	} 
    			table.rows[i].deleteCell(col); 
    			table.rows[i-provincePos].cells[col].rowSpan = table.rows[i-provincePos].cells[col].rowSpan+1; 
    			provincePos++; 
        	}else{ 
        		lastProvinceValue = provinceValue;
        		lastCityValue = cityValue;
	        	provincePos=1;
	        	cityPos=1;
        	} 
    	}   	 
    }	
} 


上述JS代码可以直接放在SCRIPT中检测,同时如果所用的JS框架中列表展示具有回调功能可以放在回调参数中,例如:

"drawCallback":mergeTable()
上述JS代码只是简单的封装TABLE合并单元格,耦合性还较高,希望道友能够共同讨论,抽象出完全解耦的功能函数。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值