zoukankan      html  css  js  c++  java
  • js动态合并单元格

     1 <script type="text/javascript">
     2 
     3     $(document).ready(function() {
     4         // 调用
     5          mergeSameCell(document.getElementById('contentTable'),1,0,[1,2,3,4,5]); 
     6     }
     7 
     8      //tbl:table对应的dom元素,  
     9      //beginRow:从第几行开始合并(从0开始),  
    10      //endRow:合并到哪一行,负数表示从底下数几行不合并  
    11      //colIdxes:合并的列下标的数组,如[0,1]表示合并前两列,[0]表示只合并第一列  
    12      function mergeSameCell(tbl,beginRow,endRow,colIdxes){  
    13          var colIdx = colIdxes[0];  
    14          var newColIdxes = colIdxes.concat();  
    15          newColIdxes.splice(0,1)  
    16          var delRows = new Array();  
    17          var rs = tbl.rows;  
    18          //endRow为0的时候合并到最后一行,小于0时表示最后有-endRow行不合并  
    19          if(endRow === 0){  
    20              endRow = rs.length - 1;  
    21          }else if(endRow < 0){  
    22              endRow = rs.length - 1 + endRow;  
    23          }  
    24          var rowSpan = 1; //要设置的rowSpan的值  
    25          var rowIdx = beginRow; //要设置rowSpan的cell行下标  
    26          var cellValue; //存储单元格里面的内容  
    27          for(var i=beginRow; i<= endRow + 1; i++){  
    28              if(i === endRow + 1){//过了最后一行的时候合并前面的单元格  
    29                  if(newColIdxes.length > 0){  
    30                      mergeSameCell(tbl,rowIdx,endRow,newColIdxes);  
    31                  }  
    32                  rs[rowIdx].cells[colIdx].rowSpan = rowSpan;  
    33              }else{  
    34                  var cell = rs[i].cells[colIdx];  
    35                  if(i === beginRow){//第一行的时候初始化各个参数  
    36                      cellValue = cell.innerHTML;  
    37                      rowSpan = 1;  
    38                      rowIdx = i;  
    39                  }else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格  
    40                      cellValue = cell.innerHTML;  
    41                      if(newColIdxes.length > 0){  
    42                          mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);  
    43                      }  
    44                      rs[rowIdx].cells[colIdx].rowSpan = rowSpan;  
    45                      rowSpan = 1;  
    46                      rowIdx = i;  
    47                  }else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格  
    48                      rowSpan++;  
    49                      delRows.push(i);  
    50                  }  
    51              }  
    52          }  
    53          for(var j=0;j<delRows.length; j++){  
    54              rs[delRows[j]].deleteCell(colIdx);  
    55          }  
    56     }  
    57 </script>
  • 相关阅读:
    python基础26——派生&多态&绑定与非绑定方法
    python基础25——继承&属性查找&多继承的菱形问题&Mixins机制
    emmm......就当练习了系列20
    python基础24——封装&property
    emmm......就当练习了系列19
    python基础23——面向对象
    [转]N年Python老司机,血泪总结新手常见10大错误
    ATM机+购物车
    python基础22——logging模块&
    emmm......就当练习了系列18
  • 原文地址:https://www.cnblogs.com/h-wei/p/11352299.html
Copyright © 2011-2022 走看看