一个对表格进行控制的js

 

 var TableOperator=...{
     inputtext:null,//用于修改当前所选单元格的内容
     div:null,//拖动时候显示的div
     beginX:0,//拖动的起始位置
     beginY:0, 
     ChangeInfo:new Array(),
     dtable:null,//当前操作的表
     dstart:false,//是否已经开始拖动了
     seletedCells:new Array(),
      startSelect:function()//开始选择单元格
     ...{  
        if (event.button==1)
        ...{
            if(!TableOperator.div)
            ...{ 
             TableOperator.div=document.createElement("div");
             TableOperator.div.style.position="absolute";
             TableOperator.div.style.fontSize="0px";
                  }   
                   TableOperator.div.style.width= 0 ;
       TableOperator.div.style.height= 0;
                   TableOperator.div.style.left=event.clientX;
                 TableOperator.div.style.top=event.clientY;
             TableOperator.div.className="divStyle";
               TableOperator.beginX=event.clientX;
               TableOperator.beginY=event.clientY;
             document.body.appendChild(TableOperator.div);
                TableOperator.div.style.zIndex=300;
                TableOperator.div.onmouseup=TableOperator.endSelect;
                                 
        
    if(!TableOperator.dstart)
    ...{  
       
     TableOperator.dstart=true;
     TableOperator.seletedCells.length=0;
        TableOperator.seletedCells[0]=event.srcElement; 

    }
    }
     },
      Selecting:function()//拖动
      ...{  
    if(TableOperator.dstart)
    ...{
        
       TableOperator.div.style.width=Math.abs( event.clientX-TableOperator.beginX) ;
       TableOperator.div.style.height=Math.abs( event.clientY-TableOperator.beginY) ;
       if(event.clientY-TableOperator.beginY<0)
        TableOperator.div.style.top =  event.clientY ;
       if(event.clientX-TableOperator.beginX<0)
        TableOperator.div.style.left = event.clientX ;
       if(!TableOperator.IfElementInArray( event.srcElement)&& event.srcElement.tagName=="TD" )
      TableOperator.seletedCells[TableOperator.seletedCells.length]=event.srcElement;
                   
    }
      } ,
      endSelect:function()//确定选择
      ...{
          TableOperator.seletedCells.length=0;
    if(TableOperator.dstart)
    ...{ 
      TableOperator.div.removeNode(true);
             TableOperator.dstart=false;
         var objDiv=TableOperator.ObjInfo(TableOperator.div)
        for(   i=0;i<TableOperator.dtable.cells.length;i++)
        ...{
          var objTD=TableOperator.ObjInfo(TableOperator.dtable.cells[i]);
          if (objTD.top<objDiv.bottom && objTD.bottom>objDiv.top && objTD.left<objDiv.right && objTD.right>objDiv.left)
          ...{
            TableOperator.seletedCells[TableOperator.seletedCells.length]=TableOperator.dtable.cells[i];
            TableOperator.dtable.cells[i].className="selectedCell";
          }
          else
          ...{
           TableOperator.dtable.cells[i].className="";
          }
     }
        
    }
    
    TableOperator.ChangeInfo[TableOperator.ChangeInfo.length]= TableOperator.dtable ;
      },
      
      ObjInfo:function(o)//获得单元格或者当前选择框的信息
      ...{
      var obj=new  Object;
      if(o.tagName=="DIV")
      ...{
         obj.left=parseInt(TableOperator.div.style.left);
         obj.right= parseInt(TableOperator.div.style.left)+parseInt(TableOperator.div.style.width);
         obj.top= parseInt(TableOperator.div.style.top);
         obj.bottom= parseInt(TableOperator.div.style.top)+parseInt(TableOperator.div.style.height);
      }
      else if(o.tagName=="TD")
      ...{
        obj.left=obj.right=obj.top=obj.bottom=0;
   　　obj.cellIndex=o.cellIndex;
    obj.rowIndex=o.parentNode.rowIndex;
    obj.rowSpan=o.rowSpan;
    obj.colSpan=o.colSpan;   
    var twidth=o.offsetWidth;
              var theight=o.offsetHeight;
              while(o!=document.body)...{
    obj.left+=o.offsetLeft;
    obj.top+=o.offsetTop;
    o=o.offsetParent;
    }
    obj.right=obj.left+twidth;
    obj.bottom=obj.top+theight;

    
      }
      else if(o.tagName=="TABLE")
      ...{
          var colLength=0;
          var rowLength=0;
       for (var i=0;i< o.rows[0].cells.length;i++)
         colLength+=o.rows[0].cells[i].colSpan;
        var rowLength=o.rows.length;
     obj.cols=colLength ;
     obj.rows=rowLength ;
      }
      return obj;
      },
      IfElementInArray:function(o)
             ...{
                 for (var i=0;i<TableOperator.seletedCells.length;i++)
                 ...{
                   if (o==TableOperator.seletedCells[i])
                     return true;
                 }
                 return false;
             },
             Split:function(IsColSplit,crucell,num)//开始拆分单元格 isColSplit true :按照列方向拆分　false：按行方向拆粉　，crucell 当前拆分的格子，num 拆分的数目
             ...{  
              if(!num)
              num=2;
              if(!crucell)
              crucell=TableOperator.seletedCells[0];
              if(!crucell)
              return ;
              var currentCell=crucell;
                 for (var i=1;i<num;i++)
                 ...{
                   currentCell= TableOperator.SplitCell(IsColSplit,crucell);
                 }
             },
             SplitCell:function(IsColSplit,crucell)//拆分单元格
             ...{
                var cell;
                   //插入单元格的
                  cell=document.createElement("TD")
                     cell.onmousedown=TableOperator.startSelect;
                     cell.innerHTML="&nbsp;";
                 //    cell.className="selectedCell";
               cell.onmousemove=TableOperator.Selecting;
                cell.onmouseup=TableOperator.endSelect;
                cell.onselectstart="return:false";
                   var arrayCell=new Array();
                 var selectCell=crucell;
                 var CellInfo=TableOperator.ObjInfo(selectCell) ;
                if(IsColSplit)//拆分列
                  ...{
  
                     for(var i=0;i<TableOperator.dtable.cells.length;i++)
               ...{
                 var objInfo=TableOperator.ObjInfo(TableOperator.dtable.cells[i]);
                 if ((objInfo.left<=CellInfo.left) && (objInfo.right>CellInfo.left))
                 ...{
                   arrayCell[arrayCell.length]=TableOperator.dtable.cells[i];
                 }
               }
 
               
                     if(selectCell.colSpan==1)
                     ...{
      for (var i=0;i<arrayCell.length;i++)
      ...{
      if (arrayCell[i]!=selectCell)
       arrayCell[i].colSpan =arrayCell[i].colSpan+1;
      }
                     }
                     else
                     ...{   
                         cell.colSpan=selectCell.colSpan-1;
                         selectCell.colSpan=1;
                     }  
                                   cell.rowSpan=selectCell.rowSpan;
                     selectCell.insertAdjacentElement("AfterEnd", cell);

                  }
                  else//拆分行
                  ...{
                  //要插入新单元格所在的行
                  var row;
                      for(var i=0;i<TableOperator.dtable.cells.length;i++)
               ...{
                 var objInfo=TableOperator.ObjInfo(TableOperator.dtable.cells[i]);
                 if ((objInfo.top<=CellInfo.top) && (objInfo.bottom>CellInfo.top))
                 ...{
                   arrayCell[arrayCell.length]=TableOperator.dtable.cells[i];
                 }
               }
                cell.colSpan=selectCell.colSpan;
                     if(selectCell.rowSpan==1)
                     ...{
      for (var i=0;i<arrayCell.length;i++)
      ...{
      if (arrayCell[i]!=selectCell)
       arrayCell[i].rowSpan =arrayCell[i].rowSpan+1;
      }
                row=document.createElement("TR")
                        selectCell.parentNode.insertAdjacentElement("afterEnd", row);
      row.insertAdjacentElement("afterBegin", cell);
                      }
                     else
                     ...{   
                        var CellsInTheRow=new Array();
                        row =TableOperator.dtable.rows[selectCell.parentNode.rowIndex+1];
                        //寻找下一行,当前插入cell位置前一个cell或者后一个cell
                        var cellBefore ,cellAfter;
                        for (CellsIndex=0;CellsIndex<row.cells.length;CellsIndex++)
                        ...{
                           var rowCellInfo=TableOperator.ObjInfo(row.cells[CellsIndex]);

                           if (rowCellInfo.left>CellInfo.left)
                           ...{
                             cellAfter=row.cells[CellsIndex];
                             cellBefore =null;
                              break;
                           }
                              else
                           ...{   
                            cellBefore=row.cells[CellsIndex];
                             cellAfter =null;
                            }
                           
                      }
                        cell.rowSpan=selectCell.rowSpan-1; 
                        selectCell.rowSpan=1;
                        if (cellAfter)
                           cellAfter.insertAdjacentElement("beforeBegin", cell);
                        else if (cellBefore)
                           cellBefore.insertAdjacentElement("afterEnd", cell);
                        else
                            row.appendChild(cell);
                      }
          //    cell.cellIndex=TableOperator.seletedCells[0].cellIndex;
               // row.appendChild(cell);
           
                  }
                 //  TableOperator.seletedCells[TableOperator.seletedCells.length]=cell;
                   

                   return cell;
             },
   UnitCell:function()//合并单元格
   ...{
    var top,btop;
    var bottom,bbottom;
    var left,bleft;
    var right,bright;
    var obj;
    if(!(TableOperator.seletedCells.length<=1))
    ...{
     obj=TableOperator.ObjInfo(TableOperator.seletedCells[0]);
     top=obj.top;
     bottom=obj.bottom;
     left=obj.left;
     right=obj.right;
     btop=true;
     bbottom=true;
     bleft=true;
     bright=true;
     for(var i=1;i<TableOperator.seletedCells.length;i++)
     ...{
      var obj1=TableOperator.ObjInfo(TableOperator.seletedCells[i]);
      if (!(top==obj1.top))
      btop=false;
      if (!(bottom==obj1.bottom))
      bbottom=false;
      if (!(left==obj1.left))
      bleft=false;
      if(!(right==obj1.right))
      bright=false;
     }
     if( (btop && bbottom) && !(bright &&  bleft))//合并列
     ...{
      var colSpan=0;
      for(var i=0;i<TableOperator.seletedCells.length;i++)
      ...{
       colSpan+=TableOperator.seletedCells[i].colSpan; 
       if( i!=0)
       TableOperator.seletedCells[i].removeNode(true);
      }
      TableOperator.seletedCells[0].colSpan=colSpan;
      var   minColSpan=0;
       //解除合并之后的colSpan 的冗余 
      var unitCellInfo=TableOperator.ObjInfo(TableOperator.seletedCells[0]);
      var CellsInline =new Array();
      for(var i=0;i<TableOperator.dtable.cells.length;i++)
      ...{   
       var obj1=TableOperator.ObjInfo(TableOperator.dtable.cells[i]);
       if ((obj1.left<=unitCellInfo.left) && (obj1.right>unitCellInfo.left))
       ...{ 
           CellsInline[CellsInline.length]=TableOperator.dtable.cells[i];
        if ( minColSpan ==0)
         ...{
          minColSpan=obj1.colSpan;
         }
        else
        ...{
         minColSpan=Math.min(obj1.colSpan,minColSpan)
        }
         
        
         }
                      }
                    //  alert(minColSpan);
       for (var i=0 ;i<CellsInline.length;i++)
       ...{ 
        CellsInline[i].colSpan= CellsInline[i].colSpan-minColSpan  +1;
       }
                     }
     if( !(btop && bbottom) && (bright &&  bleft))
     ...{
      var rowSpan=0;
      for(i=0;i<TableOperator.seletedCells.length;i++)
      ...{
       rowSpan+=TableOperator.seletedCells[i].rowSpan; 
       if( i!=0)
       TableOperator.seletedCells[i].removeNode(true);
      }
      TableOperator.seletedCells[0].rowSpan=rowSpan;
       //解除合并之后的rowSpan 的冗余 
      var minRowSpan=0;
      var minRowDif=0;
      var unitCellInfo=TableOperator.ObjInfo(TableOperator.seletedCells[0]);
      var CellsInline =new Array();
      
      for(var i=0;i<TableOperator.dtable.cells.length;i++)
      ...{
       var obj1=TableOperator.ObjInfo(TableOperator.dtable.cells[i]);
       if ( (obj1.top<=unitCellInfo.top) && (obj1.bottom>unitCellInfo.top))
       ...{  
           CellsInline[CellsInline.length]=TableOperator.dtable.cells[i];
        if ( minRowSpan==0)
        ...{
         minRowSpan=TableOperator.dtable.cells[i].rowSpan;
        }
        else
        ...{
                                    minRowSpan=Math.min(TableOperator.dtable.cells[i].rowSpan,minRowSpan)
        }
        var mindif=Math.min(Math.abs( unitCellInfo.rowIndex+unitCellInfo.rowSpan-obj1.rowIndex),Math.abs( obj1.rowIndex+obj1.rowSpan-unitCellInfo.rowIndex));
        if (minRowDif==0)
        ...{
            minRowDif= mindif;
        }
        else
        ...{
          minRowDif=Math.min(minRowDif,mindif);
        } 
       }
                        }
                      // alert(minRowSpan);
                      if ( CellsInline.length==1)
                      CellsInline[0].rowSpan=1;
                      else
                      ...{
      for (var i=0 ;i<CellsInline.length;i++)
      ...{ 
      CellsInline[i].rowSpan= CellsInline[i].rowSpan- Math.min( minRowSpan,minRowDif)+1  ;
      } 
       } 
             //删除没有cell的行
       for(var i=TableOperator.dtable.rows.length-1;i>0;i--)
      ...{
         if (TableOperator.dtable.rows[i].cells.length==0)
           TableOperator.dtable.rows[i].removeNode(true);
            
      }
 
       }
       TableOperator.seletedCells.length=1;
    }
     
   },
   insertRow:function()
   ...{ if(TableOperator.dtable)
    ...{
   　　var colLength=0;
      for (var i=0;i< TableOperator.dtable.rows[0].cells.length;i++)
         colLength+=TableOperator.dtable.rows[0].cells[i].colSpan;
         var row=  TableOperator.dtable.insertRow(-1)
         var cell=document.createElement("TD")
        cell=document.createElement("TD")
                     cell.onmousedown=TableOperator.startSelect;
                     cell.innerHTML="&nbsp;";
                  
               cell.onmousemove=TableOperator.Selecting;
                cell.onmouseup=TableOperator.endSelect;
                cell.onselectstart="return:false";
                cell.colSpan=colLength;
      row.insertAdjacentElement("afterBegin",cell);
      
      　}
   },
   insertCol:function()
   ...{
    if(TableOperator.dtable)
    ...{
      var rowLength=TableOperator.dtable.rows.length;
         var cell=document.createElement("TD")
        cell=document.createElement("TD")
                     cell.onmousedown=TableOperator.startSelect;
                     cell.innerHTML="&nbsp;";
                  
               cell.onmousemove=TableOperator.Selecting;
                cell.onmouseup=TableOperator.endSelect;
                cell.onselectstart="return:false";
                cell.rowSpan=rowLength;
     TableOperator.dtable.rows[0].insertAdjacentElement("beforeEnd",cell);
      }
   },
     delCells:function ()//删除选定的行或者列
     ...{     
           
  　　　  var top,btop;
    var bottom,bbottom;
    var left,bleft;
    var right,bright;
    var obj;
    if(!(TableOperator.seletedCells.length<1))
    ...{ 
     obj=TableOperator.ObjInfo(TableOperator.seletedCells[0]);
     top=obj.top;
     bottom=obj.bottom;
     left=obj.left;
     right=obj.right;
     btop=true;
     bbottom=true;
     bleft=true;
     bright=true;
     var tableInfo=TableOperator.ObjInfo(TableOperator.dtable);
     for(var i=1;i<TableOperator.seletedCells.length;i++)
     ...{
      var obj1=TableOperator.ObjInfo(TableOperator.seletedCells[i]);
      if (!(top==obj1.top))
      btop=false;
      if (!(bottom==obj1.bottom))
      bbottom=false;
      if (!(left==obj1.left))
      bleft=false;
      if(!(right==obj1.right))
      bright=false;
     }
     if( (btop && bbottom) )//删除一行
     ...{
      var colSpan=0;
      for(var i=0;i<TableOperator.seletedCells.length;i++)
      ...{
       colSpan+=TableOperator.seletedCells[i].colSpan; 
      }
       if(colSpan==tableInfo.cols)
       ...{  
     　  
          TableOperator.seletedCells[0].parentElement.removeNode(true);
        TableOperator.seletedCells.length=0;
        　  }
        　  else
        　  ...{
        　   for(var i=0;i<TableOperator.seletedCells.length;i++)
        ...{
         TableOperator.seletedCells[i].innerHtml="&nbsp;"; 
        }
        　  }
        　  
                     }
     if(  (bright &&  bleft)&& TableOperator.seletedCells.length>0)
     ...{
      var rowSpan=0;
      for(i=0;i<TableOperator.seletedCells.length;i++)
      ...{
       rowSpan+=TableOperator.seletedCells[i].rowSpan; 
       }
      if (rowSpan==tableInfo.rows)
      ...{
         for(var i=0;i<TableOperator.seletedCells.length;i++)
        ...{
          TableOperator.seletedCells[i].removeNode(true);
        }
        TableOperator.seletedCells.length=0;
        　   
      }
      else
      ...{
             for(var i=0;i<TableOperator.seletedCells.length;i++)
        ...{
         TableOperator.seletedCells[i].innerHtml="&nbsp;"; 
        }
      }
      　
 
       }
       
    }
    if (TableOperator.dtable.cells.length<=0)
    ...{
       TableOperator.dtable.removeNode(true);
        TableOperator.dtable=null;
       }
   }  
     ,
      Init:function(tableName)
      ...{
       var table=   document.getElementById(tableName);
        TableOperator.dtable=table;
        
       for(var i=0;i<table.cells.length;i++)
       ...{
          table.cells[i].onmousedown=TableOperator.startSelect;
          table.cells[i].onmousemove=TableOperator.Selecting;
           table.cells[i].onmouseup=TableOperator.endSelect;
           table.cells[i].onselectstart="return:false";
          // table.cells[i].onclick=TableOperator.endSelect;
       }
      }
       
    }

 TableOperator.js

  在页面加载完毕之后调用(TableTest为要操作的表的id )
TableOperator.Init("TableTest");
调用相应的函数就可以对表格进行操作了
使用鼠标选择要操作的表格

如TableOperator.insertRow();