<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>
<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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
