script-用鼠标拖动表格的行进行数据排序
<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
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>
<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
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>