<html>
<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>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)