zoukankan      html  css  js  c++  java
  • 前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值

    var up = "<a href="javascript:void(0)" onclick="moveUp(this)">上移</a>";
                    var down = "<a href="javascript:void(0)" onclick="moveDown(this)">下移</a>";
    
    
    
    <tr id="tr_"+i><td>data[i].templateName+templateString+temOrderNum</td>
    <td>up+"&nbsp;&nbsp;&nbsp;"+down</td>
    </tr>
    
    
       /*
        表格整行上下移动
        */
        function moveUp(_a){
            var _row = _a.parentNode.parentNode;
            //如果不是第一行,则与上一行交换顺序
            var _node = _row.previousSibling;
            while(_node && _node.nodeType != 1){
              _node = _node.previousSibling;
            }
            if(_node){
              swapNode(_row,_node);
            }
           }
           function moveDown(_a){
            var _row = _a.parentNode.parentNode;
            //如果不是最后一行,则与下一行交换顺序
            var _node = _row.nextSibling;
            while(_node && _node.nodeType != 1){
              _node = _node.nextSibling;
            }
            if(_node){
              swapNode(_row,_node);
            }
           }
           function swapNode(node1,node2){
               //交换两行的排序字段值
               var val1=node1.firstChild.lastChild.value;
               var val2=node2.firstChild.lastChild.value;
               node1.firstChild.lastChild.value=val2;
               node2.firstChild.lastChild.value=val1;
            //获取父结点
            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);
           }
    如有疑问,欢迎留言讨论。
  • 相关阅读:
    Leetcode 191.位1的个数 By Python
    反向传播的推导
    Leetcode 268.缺失数字 By Python
    Leetcode 326.3的幂 By Python
    Leetcode 28.实现strStr() By Python
    Leetcode 7.反转整数 By Python
    Leetcode 125.验证回文串 By Python
    Leetcode 1.两数之和 By Python
    Hdoj 1008.Elevator 题解
    TZOJ 车辆拥挤相互往里走
  • 原文地址:https://www.cnblogs.com/zhhy/p/9769263.html
Copyright © 2011-2022 走看看