http://sunxboy.javaeye.com/blog/191652
2008-05-10
用javascript实现行的上下移动
关键字: 行 移动- <!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>