TABLE轻松实现合并相同行

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

TABLE轻松实现合并相同行

<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>