Javascript合并表格中具有相同内容单元格示例_javascript技巧



效果图:

HTML代码:
代码如下:







合并前：

a	1	2	3	4	5
a	1	2	3	4	6
a	2	3	3	4
b	3	4	6	7
b	3	5	6	7
cc	2	3	4	5
cc	2	3	5	5
d	1	2	3	4
e	1	2	3	4

合并后：

a	1	2	3	4	5
a	1	2	3	4	6
a	2	3	3	4
b	3	4	6	7
b	3	5	6	7
cc	2	3	4	5
cc	2	3	5	5
d	1	2	3	4
e	1	2	3	4

JS:
代码如下:

function mc(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
if (col >= tb.rows[0].cells.length) {
return;
}
if (col == 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[0].innerHTML) {
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
if (i == endRow - 1 && startRow != endRow) {
mc(tableId, startRow, endRow, col + 1);
}
} else {
mc(tableId, startRow, i + 0, col + 1);
startRow = i + 1;
}
}
}
mc('table1',0,0,0);