table表的排序

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

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

· 828 阅读

文章标签：

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

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

15 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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