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>