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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
详解VUE 数组更新
Dec 16 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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的一些基础知识分享
2011/07/27 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php单链表实现代码分享
2016/07/04 PHP
Javascript面向对象之四 继承
2011/02/08 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
python中实现精确的浮点数运算详解
2017/11/02 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
详解Python中is和==的区别
2019/03/21 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
numpy.array 操作使用简单总结
2019/11/08 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python 变量初始化空列表的例子
2019/11/28 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS