JavaScript JS合并单元格 rowspan

功能模块用到了合并单元格,网上看了下大都是转来转去的,而且多列合并时,没有判断前面的列是否存在合并, 造成后续列合并与前列有冲突,于是花时间写了一个

判断依据是取需要判断的第一行数据,循环剩下的数据行和第一行值匹配,条件满足则为合并单元格,遇到不等的开始新循环判断

function test(mTab, colIndex, beginRow,isCk) {
	//前列验证
	var chkCS=function(tab,rindex,cindex){
		var row=mTab.rows[rindex];
		var sr=-1,isrowspan='';
		for(var r=cindex-1;r>=0;r--){
			sr=row.cells[r]?row.cells[r].getAttribute('abbr'):0;
			isrowspan=row.cells[r]?row.cells[r].getAttribute('isrowspan'):'n';
			if(sr||isrowspan=='y')
				break;
		}
		return sr===null?0:sr;
	}
	if (mTab != null) {
		//单元格			
		var tdb = mTab.rows[beginRow].cells[colIndex];
		//单元格文本
		var tdTxt=tdb.innerText;
		var nexttxt = '',//下一行文本
		currenttd,//当前循环单元格
		lastColspan,//前列合并序号
		colspan = 1;//合并个数
		for (var i = beginRow + 1; i < mTab.rows.length; i++) {
			currenttd=mTab.rows[i].cells[colIndex];
			if(!currenttd)
				continue;
			nexttxt =currenttd.innerText;
			//之前有合并的不能超出上一合并行值,当isCk传入true时不进行前列判断,完全合并
			lastColspan=isCk?-1:chkCS(mTab,i,colIndex);
			//添加属性确定当前列为合并列,后续判断使用
			currenttd.setAttribute('isrowspan','y');
			//判断是否需要合并,合并隐藏。并且合并数量不得超过前一合并值
			if (tdTxt == nexttxt&&(lastColspan>colspan||lastColspan==-1)) {
				//console.log('合并第'+colIndex+'列'+'行:'+i+',abbr:'+lastColspan);
				colspan++;
				currenttd.setAttribute('abbr',colspan);
				currenttd.style.display = "none";
			} else {
				//当值不等,或者不满足条件,合并,开始新循环
				tdb.rowSpan = colspan;
				tdb = currenttd;
				tdTxt = nexttxt;
				colspan = 1;
			}
			//最后一行合并下
			if(i==mTab.rows.length-1){
				tdb.rowSpan = colspan;
			}
		}
	}		
}
测试不多,可能会在合并bug

合并前,最后一列是忽略前边列的合并,相同的全部合并

JavaScript JS合并单元格 rowspan_第1张图片

合并后

JavaScript JS合并单元格 rowspan_第2张图片

你可能感兴趣的:(JavaScript JS合并单元格 rowspan)