总体思路是在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. 转载 - Catalan数(卡特兰数)

    出处:http://blog.sina.com.cn/s/blog_6aefe4250101asv5.html 什么是Catalan数 说到Catalan数,就不得不提及Catalan序列,Catal ...

  2. 转载 - AC自动机算法

    出处:http://blog.csdn.net/niushuai666/article/details/7002823 AC自动机简介:  首先简要介绍一下AC自动机:Aho-Corasick aut ...

  3. Official Documents

    1. Docker Installation https://docs.docker.com/install/linux/docker-ee/suse/ 2. Docker hub https://d ...

  4. mongodb--作为windows服务启动

    注意需要以管理员权限运行CMD

  5. IT人才异军突起 有招网引领业界精英

    随着网络时代的到来,IT人才也在不断的增长.当然,不仅IT行业对IT人才需求旺盛.部分传统企业为打造互联网时代下的企业,也在紧锣密鼓的招聘IT人才.据统计.眼下我国各地对IT人才的需求已经占领总体人才 ...

  6. [Unit Testing] Set the timeout of a Test in Mocha

    Mocha uses a default timeout of 2000 ms. However, if for some reason that does not work for your use ...

  7. 怎样安装g++/gdb

    该文的word文档附在文后! 链接:http://pan.baidu.com/s/1bnFcMHDpassword:z7zk

  8. Struts简单介绍

    一.在介绍struts之前,先来了解一下什么是MVC框架吧. 1.MVC介绍 MVC全名是Model View Controller.是模型(model)-视图(view)-控制器(controlle ...

  9. Scrapy源代码分析-经常使用的爬虫类-CrawlSpider（三）

    CrawlSpider classscrapy.contrib.spiders.CrawlSpider 爬取一般站点经常使用的spider.其定义了一些规则(rule)来提供跟进link的方便的机制. ...

  10. 深入浅出游戏算法(4)-unity3d算法（1）-球转动

    球 转动 按以下布局放置好unity3d的各个组件.设置好渲染.位置.光源.大小等 麦好的AI乐园博客全部内容是原创,假设转载请注明来源 http://blog.csdn.net/myhaspl/ 编 ...