js表格拖动排序

超、凢脫俗 2022-08-12 16:22 240阅读 0赞

原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！**jquery.tablednd\_0\_5.js**

非js库的js表格拖动代码

<html> <head> <title>表格排序 </title> <mce:script language="javascript"></mce:script> </head> <body> <center>用鼠标移动TR </center> <br> <center> <table class="sortable" id="mytable" width="300" border="1" cellpadding="0" cellspacing="0" > <tr style='height:25;position:static;'> <th scope="col">name </th> <th scope="col">age </th> <th scope="col">sex </th> </tr> <tr id="TrID1" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">1 </td> <td bgcolor="\#ffffff">1 </td> <td bgcolor="\#ffffff">1 </td> </tr> <tr id="TrID2" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">2 </td> <td bgcolor="\#ffffff">2 </td> <td bgcolor="\#ffffff">2 </td> </tr> <tr id="TrID3" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">3 </td> <td bgcolor="\#ffffff">3 </td> <td bgcolor="\#ffffff">3 </td> </tr> <tr id="TrID4" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">4 </td> <td bgcolor="\#ffffff">4 </td> <td bgcolor="\#ffffff">4 </td> </tr> <tr id="TrID5" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">5 </td> <td bgcolor="\#ffffff">5 </td> <td bgcolor="\#ffffff">5 </td> </tr> <tr id="TrID6" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">6 </td> <td bgcolor="\#ffffff">6 </td> <td bgcolor="\#ffffff">6 </td> </tr> <tr id="TrID7" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">7 </td> <td bgcolor="\#ffffff">7 </td> <td bgcolor="\#ffffff">7 </td> </tr> <tr id="TrID8" style='height:25;position:relative;' οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'> <td bgcolor="\#ffffff">8 </td> <td bgcolor="\#ffffff">8 </td> <td bgcolor="\#ffffff">8 </td> </tr> </table> <table width="300" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" align="center"> <input type="button" name="BtnTest1" value=" 测试 " onClick="FunTest()"> </td> <td colspan="3" align="center"> <input type="button" name="BtnTest2" value=" 保存 " onClick='setCookie()'> </td> <td colspan="3" align="center"> <input type="button" name="BtnTest3" value=" 排序 " onClick='checkCookie()'> </td> <td colspan="3" align="center"> <input type="reset" name="BtnTest4" value=" 取消 " onClick='cancel()'> </td> </tr> </table> </center> </body> </html>