根据条件合并单元格

今天拿到一个需求就是需要合并单元格，对于看到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的id
                
            var  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 = 0
            num = 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";            
                }        
            }    
        }     
    };