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

Posted zhhy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值相关的知识,希望对你有一定的参考价值。

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

 

以上是关于前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值的主要内容,如果未能解决你的问题,请参考以下文章

js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息

css让表格第一列和第一行固定

急,我想用网页实现如图的操作~javascript(dom操作)

请教jquery 对表格的行操作的。对页面表格进行上下移动位置,删除记录的操作。 谢谢。如下补充

怎么提取mysql数据库表中的内容,并以表格形式显示在页面上。

js 表格上下移动 javascript实现