html相同数据合并单元格合并单元格,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);