zoukankan      html  css  js  c++  java
  • 表格行操作(上移、下移)

    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>  
  • 相关阅读:
    前端的UI设计与交互之布局篇
    前端的UI设计与交互之文案篇
    前端的UI设计与交互之字体篇
    前端的UI设计与交互之图标篇
    前端的UI设计与交互之色彩篇
    Linux学习(一)
    PHP正则表达式基本语法
    PHP正则表达式函数学习
    PHP发送HTTP请求的几种方式
    PHP实现队列
  • 原文地址:https://www.cnblogs.com/guozhe/p/2318207.html
Copyright © 2011-2022 走看看