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 相关文章推荐
深入解析JavaScript中的变量作用域
Dec 06 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
vue路由权限校验功能的实现代码
Jun 07 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
无限级别菜单的实现
2006/10/09 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
深入分析php之面向对象
2013/05/15 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python 获取字符串MD5值方法
2018/05/29 Python
python后端接收前端回传的文件方法
2019/01/02 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
pandas的resample重采样的使用
2020/04/24 Python
python线程池如何使用
2020/05/28 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Servlet方面面试题
2016/09/28 面试题
应届大学生自荐信
2013/12/05 职场文书
高一地理教学反思
2014/01/18 职场文书
七年级音乐教学反思
2014/01/26 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
申报优秀教师材料
2014/12/16 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js