JS 动态合并 table 行

2019独角兽企业重金招聘Python工程师标准>>>

JS 代码：

<script type="text/javascript">
     $(document).ready(function() {
        tableRowspan(table1, 7);    // table1：table 标签自定义的ID；  7：默认合并的最大列数
    })
    
    // 合并(tab: table 自定义ID  maxCol：合并单元格作用到多少列)
    function tableRowspan(tab, maxCol) {
         var val = "",
              count,
              start;      
         for (var col = maxCol - 1; col >= 0; col--) {
             count = 1;
             for (var i = 0; i < tab.rows.length; i++) {
                 if (val == tab.rows[i].cells[col].innerHTML) {
                     count++;
                } else {
                    if (count > 1) {
                        //合并 
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) {
                            tab.rows[j].cells[col].style.display = "none";
                        }
                        count = 1;
                    }
                    val = tab.rows[i].cells[col].innerHTML;
                }
            }
         
            if(count > 1 ) { 
                //合并，最后几行相同的情况下
                start = i - count;
                tab.rows[start].cells[col].rowSpan = count;
                for (var j = start + 1; j < i; j++) {
                    tab.rows[j].cells[col].style.display = "none";
                }
            }
        }
    }
</script>

 

PS: 页面值跟前加隐藏域值可解决层级之间的显示问题

转载于:https://my.oschina.net/u/2452573/blog/779709