今天拿到一個(gè)需求就是需要合并單元格，對(duì)于看到table腦闊疼的我來說真的覺得要死了。jq庫有插件 但是 會(huì)有如下情況。

于是想自己寫，發(fā)現(xiàn)也不會(huì)，怎么辦呢。面向百度，借鑒了大佬的eg ：傳送門
于是有了如下（樣式自己去寫哦baby）
HTML:

<table id="process-demo-1"><thead><tr><th>col0</th><th>col1</th><th>col2</th><th>col3</th></tr></thead><tbody><tr><td>SuZhou</td><td>11111</td><td>22222</td><td>SuZhouCity</td></tr><tr><td>SuZhou</td><td>33333</td><td>222221</td><td>SuZhouCity</td></tr><tr><td>SuZhou</td><td>55555</td><td>66666</td><td>SuZhouCity</td></tr><tr><td>ShangHai</td><td>77777</td><td>88888</td><td>SuZhouCity</td></tr><tr><td>ShangHai</td><td>uuuuu</td><td>hhhhh</td><td>ShangHaiCity</td></tr><tr><td>ShangHai</td><td>uuuuu</td><td>ccccc</td><td>ShangHaiCity</td></tr><tr><td>GuangZhou</td><td>ttttt</td><td>eeeee</td><td>GuangZhouCity</td></tr><tr><td>GuangZhou</td><td>ppppp</td><td>qqqqq</td><td>GuangZhouCity</td></tr></tbody></table>

js:

<script type="text/javascript">window.onload = function() { var tab = document.getElementById("process-demo-1"); //process-demo-1為你的table的idvar col = 3, //合并單元格的列數(shù) 如果需要范圍可以點(diǎn)擊上方傳送門去看大佬的val, count, start; count = 1; val = ""; val1 = "" for (var i = 1; i < tab.rows.length; i++) { if (val == tab.rows[i].cells[3].innerHTML && val1 == tab.rows[i].cells[0].innerHTML) { //判斷 count++; } else { if (count > 1) { //合并start = i - count; tab.rows[start].cells[3].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[3].style.display = "none"; } count = 1; } val = tab.rows[i].cells[3].innerHTML; //用來判斷需要的那一列的數(shù)據(jù)是否相同val1 = tab.rows[i].cells[0].innerHTML; //這里是用來判斷col0是否相同 } } if (count > 1 ) { //合并，最后幾行相同的情況下start = i - count; tab.rows[start].cells[3].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[3].style.display = "none"; } } };</script>

最后的效果圖

封裝一下吧

hebing("process-demo-1", 3, 0)function hebing(tableId, num, bynum) { //tableId 為表格的id，num為合并的列序號(hào)（從0開始排哦），bynum(依據(jù)哪一列)var tab = document.getElementById(tableId);var val, count, start; count = 1; val = ""; val1 = "" for (var i = 1; i < tab.rows.length; i++) { if (val == tab.rows[i].cells[num].innerHTML && val1 == tab.rows[i].cells[bynum].innerHTML) { count++; } else { if (count > 1) { //合并start = i - count; tab.rows[start].cells[num].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[num].style.display = "none"; } count = 1; } val = tab.rows[i].cells[num].innerHTML; val1 = tab.rows[i].cells[bynum].innerHTML; } } if (count > 1 ) { //合并，最后幾行相同的情況下start = i - count; tab.rows[start].cells[num].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[num].style.display = "none"; } } };

如果需要合并多個(gè)，如下：

hebing("process-demo-1", [2,3], 0) //這個(gè)方法即合并單個(gè)也可合并多個(gè)，只需要記住需要第二個(gè)參數(shù)傳數(shù)組function hebing(tableId, list, bynum) { //tableId 為表格的id，list為合并的列序號(hào)（從0開始排哦,如果是一個(gè)請(qǐng)傳[n],如果是多個(gè)請(qǐng)傳[n,m],請(qǐng)以array的形式傳過去），bynum(依據(jù)哪一列)var tab = document.getElementById(tableId);for (let n = 0; n < list.length; n++) {var val, count, val1, start, num; count = 1; val = ""; val1 = "" ;start = 0num = list[n]for (var i = 1; i < tab.rows.length; i++) { if (val == tab.rows[i].cells[num].innerHTML && val1 == tab.rows[i].cells[bynum].innerHTML) { count++; } else { if (count > 1) { //合并start = i - count; tab.rows[start].cells[num].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[num].style.display = "none"; } count = 1; } val = tab.rows[i].cells[num].innerHTML; val1 = tab.rows[i].cells[bynum].innerHTML; } } if (count > 1 ) { //合并，最后幾行相同的情況下start = i - count; tab.rows[start].cells[num].rowSpan = count; for (var j = start + 1; j < i; j++) { tab.rows[j].cells[num].style.display = "none"; } } } };

總結(jié)

以上是生活随笔為你收集整理的根据条件合并单元格的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。