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=" "; // 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=" "; 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=" "; 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=" "; } } } 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=" "; } } } } 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].οnclick=TableOperator.endSelect; } } }
TableOperator.js
在页面加载完毕之后调用(TableTest为要操作的表的id )TableOperator.Init("TableTest");调用相应的函数就可以对表格进行操作了使用鼠标选择要操作的表格
如TableOperator.insertRow();
