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>

 

posted @ 2019-08-14 15:34  〆平平淡淡才是真  阅读(2785)  评论(0编辑  收藏  举报