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


        /**
         * 合并单元格
         * @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]);     

    下面是合并后的效果 :

  • 相关阅读:
    9
    8
    7
    6
    5
    第四周
    作业14-数据库
    作业13-网络
    作业12-流与文件
    作业11-多线程
  • 原文地址:https://www.cnblogs.com/macliu/p/10812026.html
Copyright © 2020-2023  润新知