html 合并单元格展示,一种HTML table合并单元格的思路

/**

* 合并单元格

* @param table1 表格的ID

* @param startRow 起始行

* @param col 合并的列号，对第几列进行合并(从0开始)。如果传下来为0就是从第一列开头到结束合并*/

functionmergeCell(table1, startRow, mergeColArr){var tb =document.getElementById(table1);var endRow=tb.rows.length;var colLen = tb.rows[0].cells.length - 1;var cmpCnt = "order_no";var orderRows =[];var bgColor = ["rgb(252,252,252)","rgb(242,242,242)"];var orderIdx = 0;//每个订单的起始行号

var mergeStarRow = 1;for (var i = startRow; i < endRow; i++) {if(typeof tb.rows[i + 1] === "undefined"){for(var m = colLen; m >= 0; m--){

tb.rows[i].cells[m].style.backgroundColor= bgColor[orderIdx % 2];

}break;

}var prev_rows = tb.rows[startRow],prev_cells =prev_rows.cells;var next_rows = tb.rows[i + 1],next_cells =next_rows.cells;if ($.trim(prev_rows.getAttribute(cmpCnt)) ==$.trim(next_rows.getAttribute(cmpCnt)))

{if(typeof tb.rows[i + 2] === "undefined"){

orderRows.push({"starow":mergeStarRow,"endrow":i+1});

}continue;

}else{

startRow= i + 1;

orderRows.push({"starow":mergeStarRow,"endrow":i});

mergeStarRow=startRow;

orderIdx++;

}

}var len =orderRows.length;for(var n = 0;n < len; n++){var starow = orderRows[n]["starow"];var endrow = orderRows[n]["endrow"];var rowspan = endrow - starow + 1;//循环行

for(var j = starow; j <= endrow; j++){var flag = false;//反序循环列(因为删掉td后索引会变)

for(var k = colLen; k >= 0; k--){

tb.rows[j].cells[k].style.backgroundColor= bgColor[n % 2];if(mergeColArr.indexOf(k) > -1){//如果是第一行，就设置rowSpan

if(j ===starow){

tb.rows[j].cells[k].rowSpan=rowspan;

}else{//否则就倒序删掉mergeColArr[k]列

tb.rows[j].removeChild(tb.rows[j].cells[k]);

}

}

}

}

}

}

mergeCell('c1',1,[0,1,2,6,7,8,9,10,12]);