总体思路是在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. 编写自己的starter项目（battcn-starter-swagger）

    自定义 starter 项目,方便其他地方调用,类似 spring.datasource.url 这种,本次以自己封装的 battcn-starter-swagger 为案例 创建一个Maven工程 ...

  2. 一个简单的ant应用

    <pre name="code" class="html"><?xml version="1.0" encoding=&q ...

  3. [Javascript Crocks] Create a Maybe with a `safe` Utility Function

    In this lesson, we’ll create a safe function that gives us a flexible way to create Maybes based on ...

  4. Android——推断Service是否已经启动

    延续百度地图定位的Demo.採用Service来进行百度定位,并且将数据上传到server上遇到了一个问题:在真机中使用清理内存来关闭程序的之后,Service会被关闭,可是过几秒中,它又会自己主动重 ...

  5. 【转】学会这13个原则写UI界面文案，用户才能秒懂

    原文网址:http://www.niaogebiji.com/article-12011-1.html 摘要: 首先,在写UI文案之前,为了理清思路,要先搞清楚三个问题:我(设计师)想让用户做什么? ...

  6. Python3爬虫--两种方法（requests(urllib)和BeautifulSoup）爬取网站pdf

    1.任务简介 本次任务是爬取IJCAI(国际人工智能联合会议)最新2018年的pdf论文文件. 本次编码用到了正则表达式从html里面提取信息,如下对正则表达式匹配规则作简要的介绍. 2.正则表达式规 ...

  7. JS函数种类详解

    1. 普通函数1.1 示例 1 2 3 function ShowName(name) {   alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同 ...

  8. HDU 3018 一笔画问题

    题意:给你一个图 判断最少用几笔把这个图画出来(画过的边不能重新画) 思路: 并查集+欧拉回路 仔细想一想. 在一个强连通分量中 所有度为奇数的点之和÷2就是要画的笔画数 Now question : ...

  9. LeetCode Weekly Contest 21

    1. 530. Minimum Absolute Difference in BST 最小的差一定发生在有序数组的相邻两个数之间,所以对每一个数,找他的前驱和后继,更新结果即可!再仔细一想,bst的中 ...

  10. A - Dubstep

    Problem description Vasya works as a DJ in the best Berland nightclub, and he often uses dubstep mus ...