表格行操作（上移、下移）

  1. <table width="200" border="1">   
  2.     <tbody>   
  3.         <tr>   
  4.             <td width="25%">1</td>   
  5.             <td width="25%">11</td>   
  6.             <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>   
  7.             <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  8.         </tr>   
  9.         <tr>   
  10.             <td>2</td>   
  11.             <td>22</td>   
  12.             <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>   
  13.             <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  14.         </tr>   
  15.         <tr>   
  16.             <td>3</td>   
  17.             <td>33</td>   
  18.             <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>   
  19.             <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  20.         </tr>   
  21.         <tr>   
  22.             <td>4</td>   
  23.             <td>44</td>   
  24.             <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>   
  25.             <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  26.         </tr>   
  27.         <tr>   
  28.             <td>5</td>   
  29.             <td>55</td>   
  30.             <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>   
  31.             <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>   
  32.         </tr>   
  33.     </tbody>   
  34. </table>   
  35.   
  36. <script type="text/javascript">   
  37. <!--   
  38. function moveUp(_a){   
  39.     var _row = _a.parentNode.parentNode;   
  40.     //如果不是第一行，则与上一行交换顺序   
  41.     var _node = _row.previousSibling;   
  42.     while(_node && _node.nodeType != 1){   
  43.         _node = _node.previousSibling;   
  44.     }   
  45.     if(_node){   
  46.         swapNode(_row,_node);   
  47.     }   
  48. }   
  49.   
  50. function moveDown(_a){   
  51.     var _row = _a.parentNode.parentNode;   
  52.     //如果不是最后一行，则与下一行交换顺序   
  53.     var _node = _row.nextSibling;   
  54.     while(_node && _node.nodeType != 1){   
  55.         _node = _node.nextSibling;   
  56.     }   
  57.     if(_node){   
  58.         swapNode(_row,_node);   
  59.     }   
  60. }   
  61.   
  62. function swapNode(node1,node2){   
  63.     //获取父结点   
  64.     var _parent = node1.parentNode;   
  65.     //获取两个结点的相对位置   
  66.     var _t1 = node1.nextSibling;   
  67.     var _t2 = node2.nextSibling;   
  68.     //将node2插入到原来node1的位置   
  69.     if(_t1)_parent.insertBefore(node2,_t1);   
  70.     else _parent.appendChild(node2);   
  71.     //将node1插入到原来node2的位置   
  72.     if(_t2)_parent.insertBefore(node1,_t2);   
  73.     else _parent.appendChild(node1);   
  74. }   
  75. //-->   
  76. </script>  

posted on 2012-01-10 15:44  水行者  阅读(1645)  评论(0)    收藏  举报

导航