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

于是想自己寫，發現也不會，怎么辦呢。面向百度，借鑒了大佬的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, //合并單元格的列數 如果需要范圍可以點擊上方傳送門去看大佬的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; //用來判斷需要的那一列的數據是否相同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為合并的列序號（從0開始排哦），bynum(依據哪一列)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"; } } };

如果需要合并多個，如下：

hebing("process-demo-1", [2,3], 0) //這個方法即合并單個也可合并多個，只需要記住需要第二個參數傳數組function hebing(tableId, list, bynum) { //tableId 為表格的id，list為合并的列序號（從0開始排哦,如果是一個請傳[n],如果是多個請傳[n,m],請以array的形式傳過去），bynum(依據哪一列)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"; } } } };

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。