原生js合并单元格

话不多说，直接上代码

//合并单元格
// 第一个参数为表格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].rows
    var spanArr = [{
        //合并第二列
        index:0,
        rows:1,     //0为第一列
    },{
        //合并第三列
        index:0,
        rows:2,     //0为第一列
    },{
        //合并第四列
        index:0,
        rows:3,     //0为第一列
    },]
    COMSpanArr(DOM,spanArr,1)       //以第二列的采购日期为基准
</script>

 四、效果

 五、备注

此方法还有不足，如只有一个参数为基准等，后续更新