js操作table中tr的顺序实现上移下移一行的效果


Posted in Javascript onNovember 22, 2018

总体思路是在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的顺序实现上移下移一行的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 #Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 #Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 #Javascript
JSON生成Form表单的方法示例
Nov 21 #Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 #Javascript
You might like
php知道与问问的采集插件代码
2010/10/12 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python查找第k小元素代码分享
2013/12/18 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
会计岗位职责
2013/11/08 职场文书
初中物理教学反思
2014/01/14 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js