table表的排序

最新推荐文章于 2023-09-21 17:18:18 发布

转载最新推荐文章于 2023-09-21 17:18:18 发布 · 851 阅读

文章标签：

#table #function #border #javascript #html #button

HTML开发备忘专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单表格拖拽排序功能。通过鼠标操作，用户可以轻松地调整表格行的位置。该示例展示了如何利用JavaScript处理鼠标事件来实现这一功能，并通过更改元素的样式属性达到视觉上的拖拽效果。

<html>

<head>

<!--

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>

用鼠标移到TR <br>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

<tr>

</td>

</tr>

</table>

</body>

</html>