TABLE轻松实现合并相同行

最近开发一个报表功能,其中有个表格就是这样的。通过ajax请求拼接完表格数据以后,调用下面js方法,实现表格首列相同行合并,当然可以扩展列啊。表格没有样式,将就看吧。


<script type="text/javascript" language="javascript">  

    //合并相同行
    function mergeFunc(tableId) {  
        var tab = document.getElementById(tableId);  
        //maxcol用于设置需要合并的列数
        var maxCol = 1;//只合并第一列
        var val, count, start;  
        for (var col = maxCol - 1; col >= 0; col--) {  
        //用于存储相同个数
            count = 1;  
            val = "";  
            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";  
                            tab.rows[j].removeChild(tab.rows[j].cells[col]);  
                        }  
                        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].removeChild(tab.rows[j].cells[col]);  
                }  
            }  
        }  
    }  
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值