码迷,mamicode.com
首页 > 移动开发 > 详细

前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值

时间:2018-10-10 23:39:01      阅读:334      评论:0      收藏:0      [点我收藏+]

标签:href   tno   位置   order   moved   data   javascrip   bsp   next   

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);
       }

 

前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值

标签:href   tno   位置   order   moved   data   javascrip   bsp   next   

原文地址:https://www.cnblogs.com/zhhy/p/9769263.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!