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