总体思路是在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. 转载 - 跳跃的舞者，舞蹈链（Dancing Links）算法——求解精确覆盖问题

    出处:http://www.cnblogs.com/grenet/p/3145800.html 精确覆盖问题的定义:给定一个由0-1组成的矩阵,是否能找到一个行的集合,使得集合中每一列都恰好包含一个1 ...

  2. Mysql查询缓存研究

    转载声明:本文为DBA+社群原创文章,转载必须连同本订阅号二维码全文转载,并注明作者名字及来源:DBA+社群(dbaplus). http://mp.weixin.qq.com/s?__biz=MzI ...

  3. Android学习心得（13） －－－ Android代码混淆（1）

    我在博客上发表一些我的Android学习心得,希望对大家能有帮助. 这一篇我们讲述一下最新的ADT环境下怎样进行Android混淆 在新版本号的ADT创建项目时.混码的文件不再是proguard.cf ...

  4. cocos2d函数

    CCNodeLoader::parseProperties CCBReader::readNodeGraph kCCBPropTypeBlockCCControl CCInvocation parse ...

  5. Scala入门到精通——第一节 Scala语言初步

    本节主要内容 Scala简单介绍 为什么要学习Scala Scala语言初步 1. Scala简单介绍 Scala(Scala Language的简称)语言是一种能够执行于JVM和.Net平台之上的通 ...

  6. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  7. mysql配置文件夹错误：在安装mysql 5.6.19 时运行cmake命令是出现CMake Error: The source directory does not appear to contai

    在安装mysql 5.5.xx 时运行cmake命令是出现CMake Error: The source directory does not appear to contain CMakeLists ...

  8. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

  9. java根据内容生成二维码图片

    package util; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; ...

  10. luogu1347 排序

    题目大意 一个不同的值的升序排序数列指的是一个从左到右元素依次增大的序列.给你一系列形如A<B的关系,并要求你判断是否能够根据这些关系确定这个数列的顺序(能,矛盾,不确定).确定n个元素的顺序后 ...