2016年的文章，当时在网上找到两种JavaScript合并页面单元格的方法（由于是先实现后总结的方式，所以很多时候忘记了原出处，侵权删），两种方法分别是两种实现思路，在案例中都将其整合到一块了。
其中，方法一更适合于页面动态新增时使用，在单元格合并之前会有检测表格是否完整的过程。而方法二则适合页面加载时执行。
废话不多说，直接上代码。
<html>标签：count,rows,++,cells,JavaScript,合并,var,tb,单元格 From： https://blog.51cto.com/u_15761576/5729934
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单元格合并demo</title>
<script>
// ---------------- 方法一 ----------------
function uniteTable(tb, colLength) {
if (!checkTable(tb))
return;
var i = 0;
var j = 0;
var rowCount = tb.rows.length; // 行数
var colCount = tb.rows[0].cells.length; // 列数
var obj1 = null;
var obj2 = null;
// 为每个单元格命名
for (i = 0; i < rowCount; i++) {
for (j = 0; j < colCount; j++) {
tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
}
}
// 逐列检查合并
for (i = 0; i < colCount; i++) {
if (i == colLength)
return;
obj1 = document.getElementById("tb__0_" + i.toString());
for (j = 1; j < rowCount; j++) {
obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
if (obj1.innerText == obj2.innerText) {
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
} else {
obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
}
}
}
}
// 检查表格是否规整
function checkTable(tb) {
if (tb.rows.length == 0) return false;
if (tb.rows[0].cells.length == 0) return false;
for (var i = 0; i < tb.rows.length; i++) {
if (tb.rows[0].cells.length != tb.rows[i].cells.length) return false;
}
return true;
}
// ---------------- 方法二 ----------------
function uniteTable2(tab,colLength){
var maxCol = colLength,val, count, start;
for (var col = maxCol - 1; col >= 0; col--) {
count = 1;
val = "";
for (var i = 0; i < tab.rows.length; i++) {
if (val == tab.rows[i].cells[col].innerHTML) {
count++;
} else {
if (count > 1) { //合并
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
}
if (count > 1) { //合并，最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
}
}
}
</script>
</head>
<body>
<table width="400" border="1" id="table1">
<tr><td>a</td><td>for</td><td>100</td><td>200</td></tr>
<tr><td>a</td><td>for</td><td>150</td><td>230</td></tr>
<tr><td>a</td><td>if</td><td>100</td><td>200</td></tr>
<tr><td>a</td><td>if</td><td>300</td><td>240</td></tr>
<tr><td>a</td><td>if</td><td>320</td><td>230</td></tr>
</table>
<br>
<!-- 这里的uniteTable2可以直接换成uniteTable来验证 -->
<input type="button" value="合并表格" onClick="uniteTable2(table1,2)">
</body>
</html>