交换表格行的位置

2016-02-22    编辑:kp12345     点击(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
<style type="text/css">
<!--
td  { text-align:center;font-size:12px;padding:3px;}
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td width="25%">1</td>
            <td width="25%">11</td>
   <!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
            <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>22</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>33</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>44</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>55</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
 //遍历element的子结点
 for (var i = 0; i < element.childNodes.length; i++) {
  var node = element.childNodes[i];
  //判断是否是空白文本结点,如果是,则删除该结点
  if (node.nodeType == 3 && !/S/.test(node.nodeValue))
  node.parentNode.removeChild(node);
 }
}
//获得表格对象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移,接收参数为链接对象
function moveUp(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是第一行,则与上一行交换顺序
 if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移,接收参数为链接对象
function moveDown(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是最后一行,则与下一行交换顺序
 if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
 //获取父结点
 var _parent=node1.parentNode;
 //获取两个结点的相对位置
 var _t1=node1.nextSibling;
 var _t2=node2.nextSibling;
 //将node2插入到原来node1的位置
 if(_t1)_parent.insertBefore(node2,_t1);
 else _parent.appendChild(node2);
 //将node1插入到原来node2的位置
 if(_t2)_parent.insertBefore(node1,_t2);
 else _parent.appendChild(node1);
}
//-->
</script>