拖动的table cell

最新推荐文章于 2022-05-23 16:26:00 发布

callan

最新推荐文章于 2022-05-23 16:26:00 发布

阅读量91

点赞数

分类专栏： web 文章标签： JavaScript ViewUI

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<body οndragstart="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" οnmοuseοver="oSelect()"  οndragenter="return false;" οndragοver="return false;" οndrοp="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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动的table cell

&lt;body ondragstart="oDragStart()"&gt;&lt;SCRIPT LANGUAGE="JavaScript"&gt;&lt;!--var isFromCellIndex,isToCellIndex;function oDragStart(){ if (event.srcElement.tagName=="TD") { window.eve...
复制链接

扫一扫

专栏目录