一种HTML table合并单元格的思路
2019-05-05 11:23 盛世游侠 阅读(1776) 评论(0) 编辑 收藏 举报/** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始)。如果传下来为0就是从第一列开头到结束合并 */ function mergeCell(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]);
下面是合并后的效果 :