2008-03-13

拖动的table cell

关键字: table cell 拖动列 
<body ondragstart="oDragStart()">
<SCRIPT LANGUAGE="JavaScript">
<!--
var isFromCellIndex,isToCellIndex;

function oDragStart(){
	if (event.srcElement.tagName=="TD")
   {
	   window.event.dataTransfer.effectAllowed="move";
		isFromCellIndex=event.srcElement.cellIndex;//开始drag时表格列索引
   }
   
}
function oDragEnd(){
	var isValue,i,isCellIndex;
	
       if (event.srcElement.tagName=="TD"){
		
               isToCellIndex=event.srcElement.cellIndex;//结束drag时表格列索引
               //如果
               if (isFromCellIndex<isToCellIndex){
                   for(i=0;i<document.all.oTable.rows.length;i++){
			           isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;
				
			           for(isCellIndex=isFromCellIndex;isCellIndex<isToCellIndex;isCellIndex++){
			                document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex+1).innerText;
			              }
		      	       document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;
		              }

                   }
			   else{
				   for(i=0;i<document.all.oTable.rows.length;i++){
			           isValue=document.all.oTable.rows(i).cells(isFromCellIndex).innerText;
				       
			           for(isCellIndex=isFromCellIndex;isCellIndex>isToCellIndex;isCellIndex--){
						  
    
			                document.all.oTable.rows(i).cells(isCellIndex).innerText=document.all.oTable.rows(i).cells(isCellIndex-1).innerText;

			              }
		      	       document.all.oTable.rows(i).cells(isToCellIndex).innerText=isValue;
		             }
				
				 }
		   }


}
function oSelect(){
if (event.srcElement.tagName=="TD")
   {
	   var oRange=document.body.createTextRange();
	       oRange.moveToElementText(event.srcElement);
           oRange.select();
		  
   }
}
//-->
</SCRIPT>
<TABLE  id="oTable" width="400px" onmouseover="oSelect()"  ondragenter="return false;" ondragover="return false;" ondrop="oDragEnd()" border>
<TR>
	<TD>第一列</TD><TD>第二列</TD><TD>第三列</TD><TD>第四列</TD>
</TR>
<TR>
	<TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD>
</TR>
<TR>
	<TD>1</TD><TD>4</TD><TD>3</TD><TD>4</TD>
</TR>
<TR>
	<TD>7</TD><TD>w</TD><TD>7</TD><TD>4</TD>
</TR>
<TR>
	<TD>1</TD><TD>1</TD><TD>3</TD><TD>4</TD>
</TR>
</TABLE><br>
 
评论
发表评论

您还没有登录，请登录后发表评论

Callan
搜索本博客
存档
最新评论