您的位置：首页 > Web前端 > JavaScript

js表格拖动排序

2009-03-07 16:05 597 查看
原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd_0_5.js


非js库的js表格拖动代码

<html> <head> <title>表格排序 </title> <mce:script language="javascript"><!--
function $(Id){return document.getElementById(Id);} var beginMoving = false; var tbid=new Array();//存储从cookie中获取的id集合的，如果取消是基于上次的则使用此集合来排序 window.onload=function(){ var str=document.cookie; var m=/tbId=([^;]+)/i.exec(str); if(m)tbid=eval(m[1]);//从cookie中获取原来保存的id集合  else for(var i=0;i<8;i++)tbid[i]=i+1;//如果没有cookie则默认是1--》8排序  cancel()//调用还原函数初始化上次保存的集合序列对象 } function MouseDownToMove (obj) { obj.style.zIndex = 1; obj.mouseDownY = event.clientY; obj.mouseDownX = event.clientX; beginMoving = true; obj.setCapture (); } function MouseMoveToMove (obj) { if(!beginMoving) return false; for (i = 0; i < obj.cells.length; i ++) obj.cells [i].style.filter = "alpha(opacity = 70)"; obj.style.top = (event.clientY - obj.mouseDownY); obj.style.left = (event.clientX - obj.mouseDownX); } function MouseUpToMove (obj) { if (!beginMoving) return false; obj.releaseCapture ();//见 obj.setCapture ();  obj.style.top = 0; obj.style.left = 0; obj.style.zIndex = 0; beginMoving = false; var tempTop = event.clientY - obj.mouseDownY; var tempRowIndex = (tempTop - tempTop % 25) / 25; 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; for (i = 0; i < obj.cells.length; i ++) obj.cells [i].style.filter = "alpha(opacity = 100)"; if ( tempRowIndex == 0 ) //如果移动目标是表头,则返回,不移动 return false; obj.parentElement.moveRow(obj.rowIndex, tempRowIndex); } function FunTest () { for (i = 1; i <= 8; i ++) { alert ("TrID"+i+":"+document.getElementById ("TrID" + (i)).rowIndex); } } function setCookie() { var tr,tb=$('mytable'); var len=tb.rows.length; var data="["; for(var i=1;i<len;i++)data+=tb.rows[i].id.substring(4)+","; data=data.substring(0,data.length-1); data+="]"; var d=new Date(); d.setMonth(d.getMonth()+1);//有效期1个月  document.cookie="tbId="+data+";expires="+d.toGMTString(); alert('保存成功'); } function checkCookie() { } //这里的取消是基于上次排序的 function cancel() { var tr,tbody=$('mytable').firstChild; for(var i=0;i<tbid.length;i++){ tr=$("TrID"+tbid[i]); tr=tbody.removeChild(tr); tbody.appendChild(tr); } }
// --></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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航