JS代码完成动态改变表格的行顺序
【实例名称】
JS代码实现动态改变表格的行顺序
【实例描述】
Ajax技术可以实现表格的多项特性，如拖动、编辑等，其实现的本质依然是JavaScript技术。本例将使用JaVaScript实现表格的行拖动。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页-本站（www.xue51.com）</title> <script language="javascript"> var beginMoving=false; //判断是否移动的标识-移动开关 //鼠标按下时的操作 function MouseDownToMove(obj){ obj.style.zIndex=1; //样式 obj.mouseDownY=event.clientY; //鼠标Y坐标 obj.mouseDownX=event.clientX; //鼠标X坐标 beginMoving=true; //开始移动 obj.setCapture(); //捕获鼠标操作 } //鼠标按下并移动时的操作 function MouseMoveToMove(obj){ if(!beginMoving) return false; //改变目标行的X.Y坐标 obj.style.top = (event.clientY-obj.mouseDownY); obj.style.left = (event.clientX-obj.mouseDownX); } //鼠标抬起时的操作 function MouseUpToMove(obj){ if(!beginMoving) return false; obj.releaseCapture(); //释放对鼠标的捕获 obj.style.top=0; obj.style.left=0; obj.style.zIndex=0; beginMoving=false; //关闭移动开关 var tempTop=event.clientY-obj.mouseDownY; var tempRowIndex=(tempTop-tempTop%20)/20; //根据行高度获取行位置索引 if(tempRowIndex+obj.rowIndex <0 ) tempRowIndex=-1; else tempRowIndex=tempRowIndex+obj.rowIndex; //实际的行索引 if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1; obj.parentElement.moveRow(obj.rowIndex,tempRowIndex); //移动行到指定位置 } </script> </head> <body> <TABLE WIDTH="300" BORDER="1" > <TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第一行</TD> <TD>第一行</TD><TD>第一行</TD></TR> <TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第二行</TD> <TD>第二行</TD><TD>第二行</TD></TR> <TR style='height:20;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD >第三行</TD> <TD>第三行</TD><TD>第三行</TD></TR> </TABLE> </body> </html>
【运行效果】
初始运行效果
拖动后的效果
【难点剖析】
本例的重点是鼠标的三个方法：按下、移动和抬起，使用“setCapture”捕获鼠标的操作一直到“releaseCapture”释放鼠标为止。最后根据行的高度判断行的位置索引，使用“move”方法移动行到指定位置。
【源码下载】
如果你不愿复制代码及提高代码准确性，你可以点击：动态改变表格的行顺序 进行本实例源码下载
……