码迷,mamicode.com
首页 > Web开发 > 详细

一种HTML table合并单元格的思路

时间:2019-05-05 11:57:49      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:rowspan   nbsp   cti   else   mamicode   indexof   define   反序   ==   

    /**
     * 合并单元格
     * @param table1    表格的ID
     * @param startRow  起始行
     * @param col   合并的列号,对第几列进行合并(从0开始)。如果传下来为0就是从第一列开头到结束合并
     */ 
      
      function mergeCell(table1, startRow, mergeColArr){            
               
            var tb = document.getElementById(table1);
            var endRow=tb.rows.length;
            var colLen = tb.rows[0].cells.length - 1;
            var cmpCnt = "order_no";
            var orderRows = [];
            var bgColor = ["rgb(252,252,252)","rgb(242,242,242)"];
            var orderIdx = 0;
          //每个订单的起始行号
            var mergeStarRow = 1;

            for (var i = startRow; i < endRow; i++) {
                                
                      if(typeof tb.rows[i + 1] === "undefined"){
                          
                          for(var m = colLen; m >= 0; m--){
                              tb.rows[i].cells[m].style.backgroundColor = bgColor[orderIdx % 2];
                          }
                          break;
                      }
                      
                      var prev_rows = tb.rows[startRow],prev_cells = prev_rows.cells;
                      var next_rows = tb.rows[i + 1],next_cells = next_rows.cells;

                      if ($.trim(prev_rows.getAttribute(cmpCnt)) == $.trim(next_rows.getAttribute(cmpCnt))) 
                    {
                          if(typeof tb.rows[i + 2] === "undefined"){
                            orderRows.push({"starow":mergeStarRow,"endrow":i+1});
                          }
                        continue;
                    }else{
                        startRow = i + 1;
                        orderRows.push({"starow":mergeStarRow,"endrow":i});
                        mergeStarRow = startRow;
                        orderIdx++;
                    }
            }
            
            
          var len = orderRows.length;
          
          for(var n = 0;n < len; n++){

              var starow = orderRows[n]["starow"];
              var endrow = orderRows[n]["endrow"];
              var rowspan = endrow - starow + 1;
              
                //循环行
                for(var j = starow; j <= endrow; j++){
                    
                        var flag = false;
                        //反序循环列(因为删掉td后索引会变)
                        for(var k = colLen; k >= 0; k--){
                            
                           tb.rows[j].cells[k].style.backgroundColor = bgColor[n % 2];
                           if(mergeColArr.indexOf(k) > -1){
                              
                              //如果是第一行,就设置rowSpan
                              if(j === starow){
                                  tb.rows[j].cells[k].rowSpan = rowspan;
                              }else{
                                  //否则就倒序删掉mergeColArr[k]列
                                  tb.rows[j].removeChild(tb.rows[j].cells[k]);
                              }
                           }

                        }
                        
                }

          }

        }

      
      mergeCell(‘c1‘,1,[0,1,2,6,7,8,9,10,12]);     

 

下面是合并后的效果 :

 

技术图片

 

一种HTML table合并单元格的思路

标签:rowspan   nbsp   cti   else   mamicode   indexof   define   反序   ==   

原文地址:https://www.cnblogs.com/macliu/p/10812026.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!