表格合并之表头分级合并 JSON绑定后 合并表头 JQuery版本

合并前效果

image.png

合并后效果

image.png

table.txt

下载案例

<html>
 <head></head>
 <body>    
  <title>table.html</title> 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  <meta http-equiv="description" content="this is my page"> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
  <style type="">
        body{
            padding: 5px;
        }
        .tb-content {
            color: #666666;
            font-size: 12px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
        .tb-content>thead>tr>td{
            text-align: center;
        }
        .tb-content>thead>tr th {
            text-align: center;
        }
        .tb-content>thead>tr:nth-child(1) th {
            color: #000000;
            text-align: center;
            background: #efefef;
        }
        .table>thead>tr>th, .table>tbody>tr>th, 
        .table>tfoot>tr>th, .table>thead>tr>td, 
        .table>tbody>tr>td, .table>tfoot>tr>td{
            vertical-align: middle;
        }
    </style> 
  <table border="1" id="combonTb" class="tb-content table table-striped table-hover table-bordered"> 
   <thead> 
    <tr> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2019</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
     <th>2020</th> 
    </tr> 
    <tr> 
     <th>7</th> 
     <th>7</th> 
     <th>7</th> 
     <th>7</th> 
     <th>8</th> 
     <th>8</th> 
     <th>9</th> 
     <th>9</th> 
     <th>10</th> 
     <th>10</th> 
     <th>11</th> 
     <th>11</th> 
     <th>12</th> 
     <th>12</th> 
     <th>1</th> 
     <th>1</th> 
     <th>1</th> 
     <th>2</th> 
     <th>2</th> 
     <th>2</th> 
     <th>3</th> 
     <th>3</th> 
     <th>4</th> 
     <th>4</th> 
     <th>5</th> 
     <th>5</th> 
     <th>5</th> 
     <th>6</th> 
     <th>6</th> 
     <th>6</th> 
     <th>6</th> 
    </tr> 
    <tr> 
     <th>40</th> 
     <th>50</th> 
     <th>51</th> 
     <th>52</th> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
     <th>5</th> 
     <th>6</th> 
     <th>7</th> 
     <th>8</th> 
     <th>9</th> 
     <th>10</th> 
     <th>12</th> 
     <th>13</th> 
     <th>14</th> 
     <th>15</th> 
     <th>16</th> 
     <th>17</th> 
     <th>18</th> 
     <th>19</th> 
     <th>20</th> 
     <th>21</th> 
     <th>22</th> 
     <th>23</th> 
     <th>24</th> 
     <th>25</th> 
     <th>26</th> 
     <th>27</th> 
     <th>28</th> 
    </tr> 
 <tr>

				<th colspan="5"> 阶段1</th>


				<th colspan="8">阶段2</th>

				<th  colspan="4">阶段3</th>

				<th  colspan="6">阶段4</th>

				<th  colspan="9">阶段5</th>

            </tr>
   </thead> 
  </table> 
  <button onclick="headRowspan('#combonTb')">合并head</button> 
<script>
   /**
    * 合并头,上一行的分组会约束下一行的分组(类似公司、部门、小组这种隶属层级约束)   
   * 思路:建立分组索引,索引含有该分组的起始坐标(用于jquery的切片选取操作$(selecter).slice(index,indexEnd))   
   * 合并当前行时,同时建立新的分组索引,用于下一行分组。
    */
function headRowspan(selecter, bool) {
    var indexsArray = [],
    /*分组信息*/
    headTRs = $(selecter).find("thead>tr");
    if (bool == true) $(selecter).find("thead>tr:last").hide();
    $.each(headTRs,
    function(index, trItem) {
        var innerIndexsArray = [],
        ths = $(trItem).children();
        if (indexsArray.length > 0) {
            $.each(indexsArray,
            function(n, m) {
                var segmentTHs = ths.slice(m.pre, m.end + 1),
                tempIndexArray = [];
                tempIndexArray = combinTH(segmentTHs, m.pre);
                $.each(tempIndexArray,
                function(indx, jsonItem) {
                    /*构建新的分组索引*/
                    innerIndexsArray.push(jsonItem);
                });
            });
            indexsArray = innerIndexsArray;
        } else indexsArray = combinTH(ths, 0);
    });      
    var count = headTRs.eq(0).children().size() - 1,
    preTd = null;      
    for (var i = count; i >= 0; i--) {
        /*纵向合并*/
         $.each(headTRs,
        function(index, trItem) {          
            var curTd = $(trItem).children().eq(i);          
            if (index == 0) {            
                    preTd = curTd;          
            } else {
                /*只对显示的单元设置合并属性,应再判断上下两个td的colspan是否相同,不同不应该合*/
                var preTxt = preTd.text(),
                curTxt = curTd.text();            
                if (curTxt && preTxt == curTxt && preTd.is(":visible")) {              
                    var rowNum = (preTd.attr("rowspan") || 1) - 0;              
                    preTd.attr("rowspan", rowNum + 1);              
                    curTd.hide();            
                } else {              
                    preTd = curTd;            
                }          
            }        
        });      
    }    
    function combinTH(ths, baseIndex) {
        /*横向合并*/
        var indexsArray = [],
        preTH = null;
        $.each(ths,
        function(n, m) {
            if (n == 0) {
                preTH = $(m);
                indexsArray.push({
                    pre: baseIndex + 0,
                    end: baseIndex + 0
                });
            } else {
                var preTxt = preTH.text(),
                curTH = $(m),
                curTxt = curTH.text();
                if (preTxt && preTxt == curTxt) {
                    var indexObj = indexsArray[indexsArray.length - 1];
                    indexObj.end += 1;
                    var colspanNum = indexObj.end - indexObj.pre + 1;
                    preTH.attr("colspan", colspanNum);
                    curTH.hide();
                } else {
                    preTH = $(m);
                    indexsArray.push({
                        pre: baseIndex + n,
                        end: baseIndex + n
                    });
                }
            }
        });
        return indexsArray;
    }
}
     </script>

</html>


欢迎分享,(联系QQ/微信:282625252)

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论