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

具体思路是

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

js代码如下

  1.         //使行向上一行
  2.         function setRowUp(obj) {
  3.             if (obj.parentNode.parentNode.rowIndex != 1) {
  4.                 var tab = obj.parentNode.parentNode.parentNode;
  5.                 var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
  6.                 var nowNowIndex = obj.parentNode.parentNode.rowIndex;
  7.                 tab.deleteRow(nowNowIndex);
  8.                 var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";
  9.                 newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");
  10.                 for (i = 1; i < tab.rows.length; i++) {
  11.                     if (i == (nowNowIndex - 1)) {
  12.                         newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
  13.                     }
  14.                     newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
  15.                 }
  16.                 newHtml += "</table>";
  17.                 document.getElementById("divContent").innerHTML = newHtml;
  18.             }
  19.         }
  20.         //使行向下一行
  21.         function setRowDown(obj) {
  22.             if (obj.parentNode.parentNode.rowIndex != (document.getElementById("divContent").childNodes[0].rows.length - 1)) {
  23.                 var tab = obj.parentNode.parentNode.parentNode;
  24.                 var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
  25.                 var nowNowIndex = obj.parentNode.parentNode.rowIndex;
  26.                 tab.deleteRow(nowNowIndex);
  27.                 var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";
  28.                 newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");
  29.                 for (i = 1; i < tab.rows.length; i++) {
  30.                     if (i == (nowNowIndex + 1)) {
  31.                         newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
  32.                     }
  33.                     newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
  34.                 }
  35.                 //向下可能到表格现有行数外 额外处理
  36.                 if (tab.rows.length == (nowNowIndex + 1)) {
  37.                     newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
  38.                 }
  39.                 newHtml += "</table>";
  40.                 document.getElementById("divContent").innerHTML = newHtml;
  41.             }
  42.         }

测试html代码如下

  1. <body>
  2.     <div id="divContent">
  3.         <table cellpadding="5" cellspacing="0">
  4.             <tr style='font-weight: bold; text-align: center;'><td>工号</td><td>姓名</td></tr>
  5.             <tr><td>0001
  6.                 <input type="button" value="↑" onclick="setRowUp(this)" />
  7.                 <input type="button" value="↓" onclick="setRowDown(this)" />
  8.                 </td><td>姓名01</td></tr>
  9.             <tr><td>0002
  10.                 <input type="button" value="↑" onclick="setRowUp(this)" />
  11.                 <input type="button" value="↓" onclick="setRowDown(this)" />
  12.                 </td><td>姓名02</td></tr>
  13.             <tr><td>0003
  14.                 <input type="button" value="↑" onclick="setRowUp(this)" />
  15.                 <input type="button" value="↓" onclick="setRowDown(this)" />
  16.                 </td><td>姓名03</td></tr>
  17.             <tr><td>0004
  18.                 <input type="button" value="↑" onclick="setRowUp(this)" />
  19.                 <input type="button" value="↓" onclick="setRowDown(this)" />
  20.                 </td><td>姓名04</td></tr>
  21.             <tr><td>0005
  22.                 <input type="button" value="↑" onclick="setRowUp(this)" />
  23.                 <input type="button" value="↓" onclick="setRowDown(this)" />
  24.                 </td><td>姓名05</td></tr>
  25.         </table>
  26.     </div>
  27. </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. 洛谷 P3178 BZOJ 4034 [HAOI2015]树上操作

    题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 :把某个节点 x 的点权增加 a .操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...

  2. logstash-input-jdbc实现mysql 与elasticsearch实时同步(ES与关系型数据库同步)

    引言: elasticsearch 的出现使得我们的存储.检索数据更快捷.方便.但很多情况下,我们的需求是:现在的数据存储在mysql.oracle等关系型传统数据库中,如何尽量不改变原有数据库表结构 ...

  3. 华为USG6550 MIB CPU MEM

    https://www.cnblogs.com/vincent-liang/p/7785089.html

  4. Sigma Function 数学 因子求和

    Sigma function is an interesting function in Number Theory. It is denoted by the Greek letter Sigma ...

  5. likely, unlikely的作用

    在项目中看到了likely.unlikely宏的使用, 一直不是非常清楚它们的作用,所以就深究下. likely表示被測试的表达式大多数情况下为true, unlikely则表示相反. 两个宏定义: ...

  6. BZOJ 1455 罗马游戏 左偏树

    题目大意:给定n个点,每一个点有一个权值,提供两种操作: 1.将两个点所在集合合并 2.将一个点所在集合的最小的点删除并输出权值 非常裸的可并堆 n<=100W 启示式合并不用想了 左偏树就是快 ...

  7. SQL Server中如何设置对列的权限

    一.方式一:使用视图 将需要限制用户只能看到特定的几个列.设置成一个视图,然后对这个视图进行权限控制 二.方式二:使用GRANT语句 1.授予相关列的查询权限(SELECT) 在数据库db1中,登录名 ...

  8. C语言——结构体的使用

    C语言允许用户自己建立由不同类型数据组成的组合型的数据结构,它称为结构体. 1.建立一个结构体 struct 结构体名{ 成员列表 }; struct Date { int month; int da ...

  9. luogu2429 制杖题

    题目大意 求不大于 m 的. 质因数集与给定有n个元素的质数集有交集的自然数之和. 数据范围 1 2 3 n*m<=10^7 4 5 n<=2,m<=10^9 6 7 n<=2 ...

  10. graphviz.js划线操作

    digraph A{ graph[color=red bgcolor="cadetblue" label="海阔天空",fontname="FangS ...