手动拖动table的行来进行的排序

来源：互联网点击：时间：2007年05月23日论坛讨论 [字号：大中小]

说明：收集自网上。

<html>

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
        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)";
    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>

上篇：表格排序 sortTable
下篇：根据按键进行选择

什么是网站标准化？

栏目导航

XHTML/CSS

AJAX

JavaScript

DOM

XML

正则表达式

网站优化

电脑网络

建站技术

手动拖动table的行来进行的排序