总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果

具体思路是

获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了目标行再直接加进去，最后把整体的html赋值给div完成效果

js代码如下

        //使行向上一行

        function setRowUp(obj) {

            if (obj.parentNode.parentNode.rowIndex != 1) {

                var tab = obj.parentNode.parentNode.parentNode;

                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;

                var nowNowIndex = obj.parentNode.parentNode.rowIndex;

                tab.deleteRow(nowNowIndex);

                var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";

                newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");

                for (i = 1; i < tab.rows.length; i++) {

                    if (i == (nowNowIndex - 1)) {

                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");

                    }

                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");

                }

                newHtml += "</table>";

                document.getElementById("divContent").innerHTML = newHtml;

            }

        }

        //使行向下一行

        function setRowDown(obj) {

            if (obj.parentNode.parentNode.rowIndex != (document.getElementById("divContent").childNodes[0].rows.length - 1)) {

                var tab = obj.parentNode.parentNode.parentNode;

                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;

                var nowNowIndex = obj.parentNode.parentNode.rowIndex;

                tab.deleteRow(nowNowIndex);

                var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";

                newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");

                for (i = 1; i < tab.rows.length; i++) {

                    if (i == (nowNowIndex + 1)) {

                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");

                    }

                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");

                }

                //向下可能到表格现有行数外 额外处理

                if (tab.rows.length == (nowNowIndex + 1)) {

                    newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");

                }

                newHtml += "</table>";

                document.getElementById("divContent").innerHTML = newHtml;

            }

        }

测试html代码如下

<body>

    <div id="divContent">

        <table cellpadding="5" cellspacing="0">

            <tr style='font-weight: bold; text-align: center;'><td>工号</td><td>姓名</td></tr>

            <tr><td>0001

                <input type="button" value="↑" onclick="setRowUp(this)" />

                <input type="button" value="↓" onclick="setRowDown(this)" />

                </td><td>姓名01</td></tr>

            <tr><td>0002

                <input type="button" value="↑" onclick="setRowUp(this)" />

                <input type="button" value="↓" onclick="setRowDown(this)" />

                </td><td>姓名02</td></tr>

            <tr><td>0003

                <input type="button" value="↑" onclick="setRowUp(this)" />

                <input type="button" value="↓" onclick="setRowDown(this)" />

                </td><td>姓名03</td></tr>

            <tr><td>0004

                <input type="button" value="↑" onclick="setRowUp(this)" />

                <input type="button" value="↓" onclick="setRowDown(this)" />

                </td><td>姓名04</td></tr>

            <tr><td>0005

                <input type="button" value="↑" onclick="setRowUp(this)" />

                <input type="button" value="↓" onclick="setRowDown(this)" />

                </td><td>姓名05</td></tr>

        </table>

    </div>

</body>

js操作table中tr的顺序，实现上移下移一行的效果的更多相关文章

  1. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  2. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  3. table中tr使用toggle不好，选择换一张方式

    好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...

  4. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  5. js导出table中的EXCEL总结

    导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户.可是.需求要把数据同一时候 ...

  6. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  7. JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js的传值，table中tr的遍历，js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  9. js操作table倒叙显示序号的问题

    今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...

随机推荐

  1. poj 1523 求割点把一个图分成几个联通部分

    #include<stdio.h> #include<string.h> #define N 1100 struct node { int u,v,next; }bian[N* ...

  2. ExpressionTreeVisualizer

    看表达式的工具,这个工具后来微软不更新了,只支持到VS2013 表达式树的语法难度太大,语法和实现难度都大 相关文章 github地址

  3. sublime text 插件emmet快捷命令

    原文链接:http://www.17yaobai.com/?p=255 语法: 后代:> 缩写:nav>ul>li <nav> <ul> <li> ...

  4. TI C66x DSP 系统events及其应用 - 5.6（INTMUX）

    系统event 0~127(包含了eventCombiner的输出event 0~3)与CPU支持的12个可屏蔽中断是通过INTMUX寄存器进行映射的(不包含NMI.RESET).能够选择将系统eve ...

  5. 网页设计——Dreamweaver

    在看ASP.NET视频时,讲到了一款编写HTML代码的软件--Dreamweaver.它是一款专门进行网页设置的软件.通过它能够设计出多彩的界面,相对于vs中自带的设计方式来说,他不须要知道太多的技术 ...

  6. bzoj2260: 商店购物&&4349: 最小树形图

    最小树形图问题啊 最小树形图是撒哩,就是给你一个有向图,确定一个根,要你到达所有点,那棵最短路径树的总边权 做这个用的是朱(jv)刘(lao)算法. 首先假如有多个联通块就无解啦 对应每个点(除了根) ...

  7. Local Response Normalization作用——对局部神经元的活动创建竞争机制，使得其中响应比较大的值变得相对更大，并抑制其他反馈较小的神经元，增强了模型的泛化能力

    AlexNet将LeNet的思想发扬光大,把CNN的基本原理应用到了很深很宽的网络中.AlexNet主要使用到的新技术点如下. (1)成功使用ReLU作为CNN的激活函数,并验证其效果在较深的网络超过 ...

  8. reportlab使用示例：文字和图片

    Python的reportlab专门将数据使用生成PDF中的图形和文档功能, 下载ReportLab https://pypi.python.org/simple/reportlab/ http:// ...

  9. [XJOI]noip44 T3还有这种操作

    还有这种操作 ttt 最近在学习二进制, 他想知道小于等于N的数中有多少个数的二进制表示中有偶数个1. 但是他想了想觉得不够dark,于是他增加了若干次操作,每次操作会将一个区间内的0变1 , 1变0 ...

  10. A - Antipalindrome

    Problem description A string is a palindrome if it reads the same from the left to the right and fro ...