js操作html的table,包括添加行，添加列，删除行，删除列,合并列-白红宇

js操作html的table,包括添加行，添加列，删除行，删除列,合并列

阅读量：5994 次

发布时间：2019-06-20

本文共 3252 字，大约阅读时间需要 10 分钟。

网上有一篇类似的文章，没有实现合并功能。

（原贴地址）

我在这篇文章的基础上做了完善，实现了合并功能。


    
     
      网页方式查看报表
      
       LandHtmlReport = function(){ this.tableId = "table"; this.tbodyId = "newbody"; this.rowCount = 10; this.colCount = 10; this.border = "1px"; this.width = "90%"; //this.init();};LandHtmlReport.prototype = { init:function(){  _table=document.getElementById(this.tableId);      _table.border=this.border;      _table.width=this.width;     for(var i=1;i<=this.rowCount;i++){         var row=document.createElement("tr");            row.id=i;          for(var j=1;j<=this.colCount;j++){              var cell=document.createElement("td");                cell.id=i+","+j;              //cell.appendChild(document.createTextNode("第"+cell.id+"列"));                row.appendChild(cell);            }          document.getElementById(this.tbodyId).appendChild(row);       } }, setCellValue:function(cellId,cellValue){  var cell = document.getElementById(cellId);  cell.appendChild(document.createTextNode(cellValue));  }, rebulid:function(){  var beginRow=document.getElementById("beginRow").value;/* 开始行 */     var endRow=document.getElementById("endRow").value;/* 结束行 */      var beginCol=document.getElementById("beginCol").value;/* 开始列 */     var endCol=document.getElementById("endCol").value;/* 结束列 */     var tempCol=beginRow+","+beginCol;/* 定位要改变属性的列 */     var td=document.getElementById(tempCol);          /* 删除要合并的单元格 */     for(var x=beginRow;x<=endRow;x++){         for(var i=beginCol;i<=endCol;i++){            if(x==beginRow && i==beginCol){                          }else{                 var row = document.getElementById(x);	         var cell = document.getElementById(x+","+i);	         this.table.rows[row.rowIndex].deleteCell(cell.cellIndex);            }         }     }     td.rowSpan = (endRow - beginRow) + 1;  td.colSpan = (endCol - beginCol) + 1; }, /* 添加行，使用appendChild方法 */  addRow:function(){     var rowLength = document.getElementById(this.tableId).rows.length;  var colLength = document.getElementById(this.tableId).rows(rowLength-1).cells.length;     var tr  =document.createElement("tr");     tr.id = rowLength + 1;     for(var i=1;i<=colLength;i++){   var td=document.createElement("td");         td.id=tr.id+","+i;      td.appendChild(document.createTextNode("第"+td.id+"列"));      tr.appendChild(td);     }    document.getElementById(this.tbodyId).appendChild(tr);   }, addRow_withInsert:function(){  var rowLength = document.getElementById(this.tableId).rows.length;     var row = document.getElementById(this.tableId).insertRow(rowLength);     var rowCount = document.getElementById(this.tableId).rows.length;     var countCell = document.getElementById(this.tableId).rows.item(0).cells.length;     for(var i=0;i
       
        
         body { TEXT-ALIGN: center;}table{ border-collapse:collapse; border-spacing:0; border-left:1px solid #888; border-top:1px solid #888; background:#efefef;}th,td{ border-right:1px solid #888; border-bottom:1px solid #888; padding:5px 10px;}th{ font-weight:bold; background:#ccc;}.main{ overflow-x: auto;  overflow-y: auto; height: 600px;  width:90%; margin-left: auto; margin-right: auto;}
         
           
          
                  
           
                  
            
                  
             
                                  
              
                            
                                       
               
                             
                                        　　    
                
                     
                             
                 
                      
                              　    
                  
                       
                                
                  
                 
                
               
              
             
            
 
            
                  
             
                                          从第            
              行到            
              行                        
              
                           
                                       　　                         从第            
               列到            
               列