在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);
