网页动态合并单元格，用于WEB报表

最新推荐文章于 2021-11-06 10:51:59 发布

原创最新推荐文章于 2021-11-06 10:51:59 发布 · 521 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

//用于将web页面上table中前某几列合并单元格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript">
            var tab;
   var tab_len;
   function area(start,end){
    this.start = start;
    this.end = end;
   }
            function gsh(cols,rowstart){
    var arr = new Array();
    tab = document.getElementsByTagName("table")[0];
            tab_len = tab.rows.length;
    arr.length=0;
    arr[0] = new area(rowstart,tab_len);
                var fullcol = document.getElementsByTagName("table")[0].rows[rowstart].cells.length;
                for(var i = 0;i<cols;i++){
     var temparr = new Array();
     temparr.length=0;
     for(var j=0;j<arr.length;j++){
       var presegm = arr[j].start;
       var segm = arr[j].end;
       var rearr = new Array();
       rearr = hb(presegm,segm,fullcol,i);
       for(var x = 0;x<rearr.length;x++){
        temparr[temparr.length] = rearr[x];
       }
     }
     arr.length = 0;
     arr = temparr;
                }
            }

  function hb(presegm,segm,fullcol,cellid){
    var nextarr = new Array();
    var loopf = tab.rows[presegm].cells.length;
    var loopc = fullcol - loopf;
                var tempval = tab.rows[presegm].cells[cellid-loopc].innerHTML;//比较的值
                var j = presegm;//比较的行
                for(var i=presegm+1;i<segm;i++){
                    var halfcol = tab.rows[i].cells.length;
     var delcols = fullcol-halfcol;
                    var nextVal = tab.rows[i].cells[cellid-delcols].innerHTML;
                    if(tempval==nextVal){
                        if(i==segm-1){//如果最后一行仍旧判断相同，则把后面相同列值的单元格合并
                            var m = i-j+1;
                            if(m>1){
        var l = tab.rows[j].cells.length;
        var c = fullcol-l;
                                tab.rows[j].cells[cellid-c].rowSpan = m;
        for(var n = 1;n<m;n++){//合并时需要删除下面行相同的列值
         var colnum= tab.rows[j+n].cells.length;
         var d = fullcol-colnum;
                                    tab.rows[j+n].deleteCell(cellid-d);
                                }
        tempval = nextVal;
        var arrlen = nextarr.length;
        nextarr[arrlen]=new area(j,i+1);
        j = i;
                            }
                        }
                        continue;
                    }else{//当遇到列值不与前一行对应列值相同时，将该行前对应列相同的值合并
                        tempval = nextVal;
                        var m = i-j;
                        if(m>1){
       var l = tab.rows[j].cells.length;
       var c = fullcol-l;
                            tab.rows[j].cells[cellid-c].rowSpan = m;
                            for(var n = 1;n<m;n++){//合并时需要删除下面行相同的列值
        var colnum= tab.rows[j+n].cells.length;
        var d = fullcol-colnum;
                                tab.rows[j+n].deleteCell(cellid-d);
                            }
       var arrlen = nextarr.length;
       nextarr[arrlen]= new area(j,i);
                        }
                        j = i;
                    }
                }
            return nextarr;
            }
        </script>
<style type="html/css">
td {
border-style: solid;
border-color: black;
}
</style>
    </head>
    <body>
        <div id="t_gzbg">
            <input type="button" value="sss" onclick="gsh(3,2);"/>
                <table id="t1" border="1" cellspacing="0" bordercolor="#00CCCC" width="300">
    <tr>
     <th colspan="4" style="text-align:center;">BiaoTiDang</th>
    </tr>
    <tr>
     <td style="text-align:center;" colspan="4"></td>
    </tr>
                        <tr>
                            <td>A1</td><td>B1</td><td>C3</td><td>d1</td>
                        </tr>
   <tr>
                            <td>A1</td><td>B2</td><td>C3</td><td>d2</td>
                        </tr>
   <tr>
                            <td>A1</td><td>B2</td><td>C3</td><td>d3</td>
                        </tr>
   <tr>
                            <td>A3</td><td>B2</td><td>C3</td><td>d4</td>
                        </tr>
   <tr>
                            <td>A3</td><td>B2</td><td>C3</td><td>d5</td>
                        </tr>
   <tr>
                            <td>A3</td><td>B3</td><td>C3</td><td>d6</td>
                        </tr>
   <tr>
                            <td>A4</td><td>B3</td><td>C3</td><td>d7</td>
                        </tr>
   <tr>
                            <td>A4</td><td>B3</td><td>C3</td><td>d8</td>
                        </tr>
   <tr>
                            <td>A4</td><td>B3</td><td>C4</td><td>d9</td>
                        </tr>
   <tr>
                            <td>A2</td><td>B3</td><td>C3</td><td>d10</td>
                        </tr>
   <tr>
                            <td>A2</td><td>B4</td><td>C3</td><td>d11</td>
                        </tr>
   <tr>
                            <td>A2</td><td>B4</td><td>C3</td><td>d12</td>
                        </tr>
                </table>

</div>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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