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 new关键字的玄机 以及其它
Aug 25 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
js实现简单五子棋游戏
May 28 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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发送post请求函数分享
2014/03/06 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python循环语句中else的用法总结
2016/09/11 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python IDLE清空窗口的实例
2018/06/25 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python编写打字训练小程序
2019/09/26 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
销售找工作求职信
2013/12/20 职场文书
廉洁校园实施方案
2014/05/25 职场文书
植树造林的宣传标语
2014/06/23 职场文书
护理专业自荐信范文
2015/03/06 职场文书
党支部培养考察意见
2015/06/02 职场文书
党员干部学习心得体会
2016/01/23 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Mysql开启外网访问
2022/05/15 MySQL