java js合并_JS合并单元格

在Web中经常需要合并单元格，例如对于下面一个表格:

table,

table tr th,

table tr td {

border: 1px solid #0094ff;

}

表头1表头2表头3表头4

列1列2列3列4列1列2列3列4列1列2列3列4

表格原来样式:

合并的JS方法:(可以作为一个工具方法)

1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并

/**

* 合并单元格(如果结束行传0代表合并所有行)

* @param table1 表格的ID

* @param startRow 起始行

* @param endRow 结束行

* @param col 合并的列号，对第几列进行合并(从0开始)。第一行从0开始

*/

function mergeCell(table1, startRow, endRow, col) {

var tb = document.getElementById(table1);

if(!tb || !tb.rows || tb.rows.length <= 0) {

return;

}

if(col >= tb.rows[0].cells.length || (startRow >= endRow && endRow != 0)) {

return;

}

if(endRow == 0) {

endRow = tb.rows.length - 1;

}

for(var i = startRow; i < endRow; i++) {

if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { //如果相等就合并单元格,合并之后跳过下一行

tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[col]);

tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan) + 1;

} else {

mergeCell(table1, i + 1, endRow, col);

break;

}

}

}

例如上面:

mergeCell('test1', 0, 0, 3);

结果

补充:如果想合并多列可以多次调用此方法，但是需要注意先合并后面的列，再合并前面的列

(1)合并多列正确用法

mergeCell('test1', 0, 0, 3);

mergeCell('test1', 0, 0, 2);

mergeCell('test1', 0, 0, 1);

(2)如果先合并前面的列查看效果

mergeCell('test1', 0, 0, 1);

mergeCell('test1', 0, 0, 2);

mergeCell('test1', 0, 0, 3);

https://www.cnblogs.com/qlqwjy/category/1035591.html