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实现3D球状标签云示例代码
Dec 01 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
实用函数9
2007/11/08 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Python实现的RSS阅读器实例
2015/07/25 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
旅游节目策划方案
2014/05/26 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
感恩的心主题班会
2015/08/12 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python