前端頁面新增表格,實現每一行能上下移動,還可修改資料庫排序欄位值

小哥哥呀發表於2018-10-10
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);
       }

 

相關文章