当前位置: 代码迷 >> Web前端 >> 根据内容归并table的单元格,支持多列的合并
  详细解决方案

根据内容归并table的单元格,支持多列的合并

热度:981   发布时间:2014-03-01 00:37:02.0
根据内容合并table的单元格,支持多列的合并
根据数据的内容纵向合并table里面的td,多列树状合并最后一个参数数组里面多写上几个列号就可以了,几列不相关,各合并各的就多调用几次吧。
function mergeSameCell(tbl,beginRow,endRow,colIdxes){
	var colIdx = colIdxes[0];
	var newColIdxes = colIdxes.concat();
	newColIdxes.splice(0,1)
	var delRows = new Array();
	var rs = tbl.rows;
	//endRow为0的时候合并到最后一行,小于0时表示最后有-endRow行不合并
	if(endRow === 0){
		endRow = rs.length - 1;
	}else if(endRow < 0){
		endRow = rs.length - 1 + endRow;
	}
	var rowSpan = 1; //要设置的rowSpan的值
	var rowIdx = beginRow; //要设置rowSpan的cell行下标
	var cellValue; //存储单元格里面的内容
	for(var i=beginRow; i<= endRow + 1; i++){
		if(i === endRow + 1){//过了最后一行的时候合并前面的单元格
			if(newColIdxes.length > 0){
				mergeSameCell(tbl,rowIdx,endRow,newColIdxes);
			}
			rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
		}else{
			var cell = rs[i].cells[colIdx];
			if(i === beginRow){//第一行的时候初始化各个参数
				cellValue = cell.innerHTML;
				rowSpan = 1;
				rowIdx = i;
			}else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格
				cellValue = cell.innerHTML;
				if(newColIdxes.length > 0){
					mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
				}
				rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
				rowSpan = 1;
				rowIdx = i;
			}else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格
				rowSpan++;
				delRows.push(i);
			}
		}
	}
	for(var j=0;j<delRows.length; j++){
		rs[delRows[j]].deleteCell(colIdx);
	}
}

//调用
mergeSameCell(document.getElementById('tableTbl'),1,-1,[0,1]);

花了整整一下午写出来的 ,js水平不高,欢迎大家拍砖
  相关解决方案