表格中的TR如何做上下移动?

这个很类似<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td
{
width:20%;
height:20px;
border-bottom:1px solid black;
border-right:1px solid black;
cursor:default;
}
div
{
font-size:13px;
}
th
{
height:20px;
font-size:12px;
font-weight:normal;
border-bottom:2px solid black;
background-color:#CCCCCC
}
</STYLE>
<SCRIPT language="javascript">/*
* created by LxcJie 2005.04.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为tempDiv
* 在table的onMouseDown事件中引入showDiv()
*/

/*--------全局变量-----------*/
var x0,y0,x1,y1;
var movable = false;
var preCell = null;
var normalColor = null;
var preColor = "lavender";
var endColor = "#FFCCFF";
/*--------全局变量-----------*///得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}//显示图层
function showDiv()
{
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all.tempDiv;
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
x0 = pos[1];
y0 = pos[0];
x1 = event.clientX;
y1 = event.clientY;
//记住原td
normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = preColor;
preCell = obj;

movable = true;
}
}
function dragDiv()
{
if(movable)
{
var oDiv = document.all.tempDiv;
var pos = new Array();
oDiv.style.top = event.clientY - y1 + y0;
oDiv.style.left = event.clientX - x1 + x0;
var oTable = document.all.table1;
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
   && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = endColor;
}
else
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = normalColor;
}
}
}
}
}function hideDiv()
{
if(movable)
{
var oTable = document.all.table1;
var pos = new Array();
if(preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
//交换文本
preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
//清除原单元格和目标单元格的样式
preCell.style.backgroundColor = normalColor;
oTable.cells[i].style.backgroundColor = normalColor;
oTable.cells[i].style.cursor = "";
preCell.style.cursor = "";
preCell.style.backgroundColor = normalColor;
}
}
}
}
movable = false;
//清除提示图层
document.all.tempDiv.style.display = "none";
}
}document.onmouseup = function()
{
hideDiv();
var oTable = document.all.table1;
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = normalColor;
}document.onmousemove = function()
{
dragDiv();
}
</SCRIPT>
</HEAD><BODY oncontextmenu="return false;">
<TABLE style="border:1px solid black;font-size:13px" id="table1" onMouseDown="showDiv()"
       onselectstart="return false;" width="70%" align="center" cellpadding="0"
   cellspacing="0" bordercolor="#FFCCFF" bgcolor="#FFFFFF">
  <TR>
    <TH colspan="4" style="">拖动交换单元格内容</TH>
  </TR>
  <TR>
    <TD>Java</TD>
    <TD>Java One </TD>
    <TD>JBuilder</TD>
    <TD>Stuts</TD>
  </TR>
  <TR>
    <TD>C++</TD>
    <TD>Visual Studio</TD>
    <TD>Office</TD>
    <TD>Windows</TD>
  </TR>
  <TR>
    <TD>PhotoShop</TD>
    <TD>Java</TD>
    <TD>Illustrator</TD>
    <TD>PageMaker</TD>
  </TR>
  <TR>
    <TD>Cartoon</TD>
    <TD>Telephone</TD>
    <TD>China</TD>
    <TD>USA</TD>
  </TR>
  <TR>
    <TD>Java</TD>
    <TD>Java One </TD>
    <TD>JBuilder</TD>
    <TD>Stuts</TD>
  </TR>
  <TR>
    <TD>C++</TD>
    <TD>Visual Studio</TD>
    <TD>Office</TD>
    <TD>Windows</TD>
  </TR>
  <TR>
    <TD>PhotoShop</TD>
    <TD>Flash</TD>
    <TD>Illustrator</TD>
    <TD>PageMaker</TD>
  </TR>
  <TR>
    <TD>Cartoon</TD>
    <TD>Telephone</TD>
    <TD>China</TD>
    <TD>USA</TD>
  </TR>
</TABLE>
<DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute;
     border:1px solid black; background-color:#FFCCFF; display:none">
</DIV>
</BODY>
</HTML>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://community.csdn.net/Expert/FAQ/FAQ_Index.asp?id=201035
<table width="338" height="0" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#666666" style="border-collapse:collapse;font-size=9pt;" id="testTable">
  <tr align="center">
    <td width="28">1</td>
    <td width="195">a</td>
    <td width="107"><a href="#" onclick="UP(this);">上移</a> <a href="#" onclick="DOWN(this);">下移</a></td>
  </tr>
  <tr align="center">
    <td>2</td>
    <td>b</td>
    <td width="107"><a href="#" onclick="UP(this);">上移</a> <a href="#" onclick="DOWN(this);">下移</a></td>
  </tr>
  <tr align="center">
    <td>3</td>
    <td>c</td>
    <td width="107"><a href="#" onclick="UP(this);">上移</a> <a href="#" onclick="DOWN(this);">下移</a></td>
  </tr>
  <tr align="center">
    <td>4</td>
    <td>d</td>
    <td width="107"><a href="#" onclick="UP(this);">上移</a> <a href="#" onclick="DOWN(this);">下移</a></td>
  </tr>
</table>
<script language="javascript" type="text/JavaScript">
    function UP(obj){
var objTable = testTable;
var theobj = event.srcElement.parentElement;
var objTD = theobj;
var objTR = objTD.parentElement;
if (objTR.rowIndex>0)
objTable.rows[objTR.rowIndex].swapNode(objTable.rows[objTR.rowIndex-1])
    }    function DOWN(obj){
var objTable = testTable;
var theobj = event.srcElement.parentElement;
var objTD = theobj;
var objTR = objTD.parentElement;
if (objTR.rowIndex<objTable.rows.length-1)
objTable.rows[objTR.rowIndex].swapNode(objTable.rows[objTR.rowIndex+1])
    }
</script>