在Web中经常需要合并单元格，例如对于下面一个表格:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
table,
table tr th,
table tr td {
border: 1px solid #0094ff;
}
</style>
</head> <body>
<table style="border: 1px;" id="test1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
</tbody>
</table> </body> </html>
表格原来样式:
合并的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);
