看我这个js,往那位高手给我提供点思路,我想实现,每行数据拖拽排序.或者根据每列的数字和时间来排序这个表格.

看我这个js,往那位高手给我提供点思路,我想实现,每行数据拖拽排序.或者根据每列的数字和时间来排序这个表格.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单行选中测试</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
table{
margin:10px auto;
border:1px #666666 solid;
}
td{
font-size:12px;
text-indent:20px;
border-bottom:1px #666666 solid;
border-left:1px #666666 solid;
}
tr{
border:1px #666666 solid;
}
.over{
background:#CCCC00;
cursor:crosshair;
}
.checked{
background:#FF0000;
}-->
</style></head><body>
<table width="95%" border="0" cellpadding="0" cellspacing="0" id="mytable">  
 <tr>  
   <td height="45" bgcolor="#CCCCCC">checkbox</td>  
   <td height="45" bgcolor="#CCCCCC">user_id</td>  
   <td height="45" bgcolor="#CCCCCC">user_name</td>  
 </tr>  
 <tr>  
   <td height="25"><input id="Checkbox0" type="checkbox"/></td>  
   <td height="25">1</td>  
   <td height="25">网址兽</td>  
 </tr>  
 <tr>  
    <td height="25"><input id="Checkbox1" type="checkbox"/></td>  
    <td height="25">2</td>
    <td height="25">webbeast</td>  
 </tr>  
 <tr>  
    <td height="25"><input id="Checkbox2" type="checkbox"/></div></td>  
    <td height="25">556</td>  
    <td height="25">swimbug</td>  
 </tr>
  <tr>  
    <td height="25"><input id="Checkbox3" type="checkbox"/></div></td>  
    <td height="25">9123</td>  
    <td height="25">username</td>  
 </tr>
  <tr>  
    <td height="25"><input id="Checkbox4" type="checkbox"/></div></td>  
    <td height="25">10</td>  
    <td height="25">乌龙茶</td>  
 </tr>
 <tr>  
    <td height="25"><input id="Checkbox5" type="checkbox"/></div></td>  
    <td height="25">5</td>  
    <td height="25">过滤html标记:<a href="http://www.webbeast.cn">webbeast.cn</a></td>  
 </tr>
  <tr>  
    <td height="25"><input id="Checkbox6" type="checkbox"/></div></td>  
    <td height="25">9</td>  
    <td height="25"><a href="http://www.webbeast.cn">webbeast.cn</a></td>  
 </tr>
  <tr>  
    <td height="25"><input id="Checkbox7" type="checkbox"/></div></td>  
    <td height="25">10</td>  
    <td height="25">测试数据</td>  
 </tr>
</table> 
<br />
<br />
&nbsp;&nbsp;&nbsp;<input name="textVal" type="text" id="check_ids" size="80"/> <table width="95%" border="0" cellpadding="0" cellspacing="0" id="mytable1">
  <tr>
    <td height="45" bgcolor="#CCCCCC">checkbox</td>
    <td height="45" bgcolor="#CCCCCC">user_id</td>
    <td height="45" bgcolor="#CCCCCC">user_name</td>
    <td bgcolor="#CCCCCC">blog</td>
    <td bgcolor="#CCCCCC">date</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox8" type="checkbox"/></td>
    <td height="25">1</td>
    <td height="25">网址兽</td>
    <td><a href="http://www.webbeast.cn">www.webbeast.cn</a></td>
    <td>2000-11-08</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox9" type="checkbox"/></td>
    <td height="25">2</td>
    <td height="25">小张</td>
    <td>setActive(&quot;mytable&quot;,&quot;check_ids&quot;);</td>
    <td>2003-11-16</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox10" type="checkbox"/>
        </div></td>
    <td height="25">5</td>
    <td height="25">你好</td>
    <td>2</td>
    <td>2002-12-22</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox11" type="checkbox"/>
        </div></td>
    <td height="25">9</td>
    <td height="25">你好</td>
    <td>3</td>
    <td>2002-01-12</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox12" type="checkbox"/>
        </div></td>
    <td height="25">10</td>
    <td height="25">你好</td>
    <td>2</td>
    <td>2000-11-12</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox13" type="checkbox"/>
        </div></td>
    <td height="25">5</td>
    <td height="25">你好</td>
    <td>2</td>
    <td>2000-11-22</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox14" type="checkbox"/>
        </div></td>
    <td height="25">9</td>
    <td height="25">测试数据三</td>
    <td>2</td>
    <td>2006-06-16</td>
  </tr>
  <tr>
    <td height="25"><input id="Checkbox15" type="checkbox"/>
        </div></td>
    <td height="25">10</td>
    <td height="25">测试数据</td>
    <td>233</td>
    <td>2000-01-12</td>
  </tr>
</table>
<br />
<br />
&nbsp;&nbsp;&nbsp;<input name="textVal" type="text" id="check_ids1" size="80"/> <br />
<br /><script type="text/javascript"> 
function $(obj) { 
return document.getElementById(obj);
}
String.prototype.trim2 = function()
{
    return this.replace(/\<[\s\S]*?\>/gi, "");
}
function setActive(obj,inputObj){
var tds=[];  
var trs = document.getElementById(obj).getElementsByTagName("tr");
for(i=1;i<trs.length;i++){
tds[i]=trs[i].getElementsByTagName("td");
trs[i].setAttribute("val","");
for (var j=1;j<tds[i].length;j++){
trs[i].setAttribute("val",trs[i].getAttribute("val")+" "+tds[i][j].innerHTML);
trs[i].setAttribute("name",tds[i][0].getElementsByTagName("input")[0].getAttribute("id"));
}
trs[i].onclick=function(){
checkObj=document.getElementById(this.getAttribute("name"));
inputText=this.getAttribute("val").trim2()+",";
if(checkObj.checked!=true){  
         $(inputObj).value = $(inputObj).value+inputText;
     }  
     else{  
         $(inputObj).value = $(inputObj).value.replace(inputText,'');  
     } 
checkObj.checked=(checkObj.checked==true)?false:true;
this.className=(this.className=="checked")?"":"checked";

}
trs[i].onmouseover=function(){
if(this.className.indexOf("checked")!=-1) return;
this.className="over";

}
trs[i].onmouseout=function(){
if(this.className.indexOf("checked")!=-1) return;
this.className="";
}
}
} 
window.onload=function(){
setActive("mytable","check_ids");
setActive("mytable1","check_ids1");
} 
</script>
</body>
</html>

解决方案 »

  1.   

    <html>  
      
    <head>  
    <title>表格排序</title>  
      
    <script language="javascript">  
    <!--   
    var beginMoving = false;   
      
    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.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   
            tempRowIndextempRowIndex = 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)";   
        obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);   
    }   
      
    function FunTest ()   
    {   
        for (i = 0; i < 8; i ++)   
        {   
            alert (document.getElementById ("TrID" + (i + 1)).rowIndex);   
        }   
    }   
    //-->  
    </script>  
    </head>  
      
    <body  bgcolor="cccccc">  
    用鼠?移?TR<br>  
     <table width="300" border="1" cellpadding="0" cellspacing="0">  
      <tr id="TrID1" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
       <td bgcolor=blue>0</td><td bgcolor="#ffffff">0</td><td bgcolor="#ffffff">0</td>  
      </tr>  
      <tr id="TrID2" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
       <td bgcolor=black>1</td><td bgcolor="#ffffff">1</td><td bgcolor="#ffffff">1</td>  
      </tr>  
      <tr id="TrID3" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
       <td bgcolor=red>2</td><td bgcolor="#ffffff">2</td><td bgcolor="#ffffff">2</td>  
      </tr>  
      <tr id="TrID4" 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="TrID5" 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="TrID6" 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="TrID7" 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="TrID8" 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>  
     </table>  
     <table width="300" border="1" cellpadding="0" cellspacing="0">  
      <tr>  
       <td colspan="3" align="center">  
        <input type="button" name="BtnTest" value=" ?? " onclick="FunTest ()">  
       </td>  
      </tr>  
      <tr><td>aa</td></tr>  
     </table>  
    </body>  
    </html> 
      

  2.   

    点页面顶部的  搜索  输入  表格排序 javascript很多 
    每列的数字和时间来排序这个表格  也很多
      

  3.   

    二楼的同志,你这个好像在firefox不兼容啊,不能托拽.
      

  4.   

    http://topic.csdn.net/u/20070927/20/5a36f9cc-7497-41fe-8837-52edb40482c3.html
    我这个贴里有一段DOM元素排序的算法,或许能有点用.
    拖动的代码:
    function drag(elementToDrag, event) {
        var startX = event.clientX, startY = event.clientY;
        var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
        var deltaX = startX - origX, deltaY = startY - origY;
        if (document.addEventListener) {
            document.addEventListener("mousemove", moveHandler, true);
            document.addEventListener("mouseup", upHandler, true);
        }
        else if (document.attachEvent) {  // IE 5+ Event Model
            elementToDrag.setCapture( );
            elementToDrag.attachEvent("onmousemove", moveHandler);
            elementToDrag.attachEvent("onmouseup", upHandler);
            // Treat loss of mouse capture as a mouseup event.
            elementToDrag.attachEvent("onlosecapture", upHandler);
        }
        else {  // IE 4 Event Model
            var oldmovehandler = document.onmousemove; // used by upHandler( )
            var olduphandler = document.onmouseup;
            document.onmousemove = moveHandler;
            document.onmouseup = upHandler;
        }    // We've handled this event. Don't let anybody else see it.
        if (event.stopPropagation) event.stopPropagation( );  // DOM Level 2
        else event.cancelBubble = true;                      // IE    // Now prevent any default action.
        if (event.preventDefault) event.preventDefault( );   // DOM Level 2
        else event.returnValue = false;                     // IE
        function moveHandler(e) {
            if (!e) e = window.event;  // IE Event Model
            elementToDrag.style.left = (e.clientX - deltaX) + "px";
            elementToDrag.style.top = (e.clientY - deltaY) + "px";        if (e.stopPropagation) e.stopPropagation( );  // DOM Level 2
            else e.cancelBubble = true;                  // IE
        }
        function upHandler(e) {
            if (!e) e = window.event;  // IE Event Model        // Unregister the capturing event handlers.
            if (document.removeEventListener) {  // DOM event model
                document.removeEventListener("mouseup", upHandler, true);
                document.removeEventListener("mousemove", moveHandler, true);
            }
            else if (document.detachEvent) {  // IE 5+ Event Model
                elementToDrag.detachEvent("onlosecapture", upHandler);
                elementToDrag.detachEvent("onmouseup", upHandler);
                elementToDrag.detachEvent("onmousemove", moveHandler);
                elementToDrag.releaseCapture( );
            }
            else {
                document.onmouseup = olduphandler;
                document.onmousemove = oldmovehandler;
            }        // And don't let the event propagate any further.
            if (e.stopPropagation) e.stopPropagation( );
            else e.cancelBubble = true;
        }
    }