总体思路是在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. Java-基本输入输出

    Scanner sc = new Scanner(System.in); System.out.println("Please input the path:"); String ...

  2. POJ 1379

    模拟退火算法. 随机MAX个点,然后,退火移动,选取距离所有点中最短中最长者即可.理解和我上一篇一样. #include <iostream> #include <cstdio> ...

  3. 安装10gR2的硬件要求

    1.至少1G的RAM. 2.RAM与swap关系: RAM                    swap 512M以上           2*RAM   (非常奇怪.至少1G的RAM.还写512的 ...

  4. 关于JOS 未对全部内存分页映射之前 物理地址映射问题的思考

    在kern/pmap.c 里面会又以下这段代码,要知道boot_alloc只会分配线性地址,真正建立虚拟页和物理页映射关系的在后面的page_alloc. ////////////////////// ...

  5. C++中sort()及qsort() （不完整介绍）

    在平时刷算法题和oj的时候,排序算法是最经常用到的算法之一:且在各类算法书的目录中 也通常是将各种排序算法放在最前面来讲,可见排序算法的重要性.可能许多人都在算法书中有学过冒泡.快速排序的方法,也都大 ...

  6. formValidator向struts2 ajax传參验证

    话不多说,直接上代码 页面head里面的formvalidator验证配置 <script type="text/javascript"> $(document).re ...

  7. 新建maven web工程报错

    问题: 检查本地仓库: 检查1.0跟release的文件夹: 试试:http://www.ithao123.cn/content-8028507.html 然后选择maven catalog下的:(这 ...

  8. HDU 5380 Travel with candy 单调队列

    pid=5380">链接 题解链接:http://www.cygmasot.com/index.php/2015/08/16/hdu_5380 题意: n C 一条数轴上有n+1个加油 ...

  9. GammaRay 是一个允许你查看 Qt 应用程序甚至在某种程度上修改它的独特应用，可谓是 Debugger 的良好补充

    GammaRay is a tool to poke around in a Qt-application and also to manipulate the application to some ...

  10. Jenkins project

    1.project name 这个作为git clone的target folder 2.Multiple SCMs 建立2个git类型的操作,相互独立. additional Behaviors 设 ...