話不多說，直接上代碼

//合并單元格 // 第一個參數為表格DOM // 第二個參數為數組[{index: 0,rows: 1,}]，index一般為0，rows為需要合并的列 // 第三個參數為基準行function COMSpanArr(DOM,array,standard){if(DOM.length>0){for(var i=0;i<DOM.length;i++){if(i > 0){for(var j=0;j<array.length;j++){if(DOM[array[j].index].cells[standard].innerText == DOM[i].cells[standard].innerText && DOM[array[j].index].cells[array[j].rows].innerText == DOM[i].cells[array[j].rows].innerText){DOM[i].cells[array[j].rows].style.display = "none"DOM[array[j].index].cells[array[j].rows].rowSpan = (DOM[array[j].index].cells[array[j].rows].rowSpan) + 1}else{array[j].index = i} }}}} }

一、關鍵點：利用td標簽的rowspan、colspan屬性

二、解析

第一層for循環了表格內每行tr的DOM，判斷相鄰行之間，指定列的innerText是否相同，如果相同則將當前循環行的指定列隱藏，對比行的指定列rowSpan屬性+1。如果不相等則修改對比行的下標。

三、使用方式

直接調用函數COMSpanArr()

<style>table{border: 1px solid red;}td{border: 1px solid red;} </style> <table id="table"><thead><tr> <th>序號</th> <th>采購日期</th> <th>訂單號</th> <th>商品名稱</th> <th>數量</th> </tr></thead><tbody><tr><td>001</td><td>2022-7-12</td><td>20220712</td><td>電腦</td><td>1</td></tr><tr> <td>002</td> <td>2022-7-12</td> <td>20220712</td> <td>鍵盤</td> <td>1</td> </tr><tr> <td>003</td> <td>2022-7-12</td> <td>20220712</td> <td>鼠標</td> <td>1</td> </tr><tr> <td>004</td> <td>2022-7-12</td> <td>20220711</td> <td>鼠標</td> <td>1</td> </tr><tr> <td>005</td> <td>2022-7-12</td> <td>20220711</td> <td>鼠標</td> <td>1</td> </tr><tr> <td>006</td> <td>2022-7-12</td> <td>20220711</td> <td>機箱</td> <td>1</td> </tr></tbody> </table><script src="/js/common.js"></script><script>var DOM = document.getElementById("table").tBodies[0].rowsvar spanArr = [{//合并第二列index:0,rows:1, //0為第一列},{//合并第三列index:0,rows:2, //0為第一列},{//合并第四列index:0,rows:3, //0為第一列},]COMSpanArr(DOM,spanArr,1) //以第二列的采購日期為基準 </script>

?四、效果

?五、備注

此方法還有不足，如只有一個參數為基準等，后續更新

?

?

總結

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

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