当前位置: 首页 > news >正文

前端页面添加表格,实现每一行能上下移动,还可修改数据库排序字段值

var up = "<a href=\"javascript:void(0)\" οnclick=\"moveUp(this)\">上移</a>";
                var down = "<a href=\"javascript:void(0)\" οnclick=\"moveDown(this)\">下移</a>";



<tr id="tr_"+i><td>data[i].templateName+templateString+temOrderNum</td>
<td>up+"&nbsp;&nbsp;&nbsp;"+down</td>
</tr>


   /*
    表格整行上下移动
    */
    function moveUp(_a){
        var _row = _a.parentNode.parentNode;
        //如果不是第一行,则与上一行交换顺序
        var _node = _row.previousSibling;
        while(_node && _node.nodeType != 1){
          _node = _node.previousSibling;
        }
        if(_node){
          swapNode(_row,_node);
        }
       }
       function moveDown(_a){
        var _row = _a.parentNode.parentNode;
        //如果不是最后一行,则与下一行交换顺序
        var _node = _row.nextSibling;
        while(_node && _node.nodeType != 1){
          _node = _node.nextSibling;
        }
        if(_node){
          swapNode(_row,_node);
        }
       }
       function swapNode(node1,node2){
           //交换两行的排序字段值
           var val1=node1.firstChild.lastChild.value;
           var val2=node2.firstChild.lastChild.value;
           node1.firstChild.lastChild.value=val2;
           node2.firstChild.lastChild.value=val1;
        //获取父结点
        var _parent = node1.parentNode;
        //获取两个结点的相对位置
        var _t1 = node1.nextSibling;
        var _t2 = node2.nextSibling;
        //将node2插入到原来node1的位置
        if(_t1)_parent.insertBefore(node2,_t1);
        else _parent.appendChild(node2);
        //将node1插入到原来node2的位置
        if(_t2)_parent.insertBefore(node1,_t2);
        else _parent.appendChild(node1);
       }

 

转载于:https://www.cnblogs.com/zhhy/p/9769263.html

相关文章:

  • 数字转换(求树的直径)
  • 初识 vue —— 最简单的前后端交互示例
  • [orleans2.1]这是你没玩过的船新版本
  • 微信小程序picker下拉绑定数据
  • UUID、GUID、SID、SUSID
  • gradle 的jar下载到哪里了
  • [luogu4162 SCOI2009] 最长距离(最短路)
  • 034 Maven中的dependencyManagement和dependencies区别
  • 心,不能装太多;人,不能想太多
  • 深入理解spark-taskScheduler,schedulerBackend源码分析
  • 神经网络之调参
  • 数组Array的API1
  • Linux下tomcat日志打印和传参乱码问题
  • React Native vs. Cordova.
  • BigDecimal使用中的一些注意事项
  • ----------
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • CSS相对定位
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • HashMap ConcurrentHashMap
  • Java基本数据类型之Number
  • JS题目及答案整理
  • leetcode388. Longest Absolute File Path
  • MySQL QA
  • python docx文档转html页面
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 分布式事物理论与实践
  • 服务器之间,相同帐号,实现免密钥登录
  • 警报:线上事故之CountDownLatch的威力
  • 看完九篇字体系列的文章,你还觉得我是在说字体?
  • 前端技术周刊 2019-01-14:客户端存储
  • 事件委托的小应用
  • 小而合理的前端理论:rscss和rsjs
  • 携程小程序初体验
  • 鱼骨图 - 如何绘制?
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 你对linux中grep命令知道多少?
  • ​ 轻量应用服务器:亚马逊云科技打造全球领先的云计算解决方案
  • # 再次尝试 连接失败_无线WiFi无法连接到网络怎么办【解决方法】
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (0)Nginx 功能特性
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (2)STM32单片机上位机
  • (delphi11最新学习资料) Object Pascal 学习笔记---第2章第五节(日期和时间)
  • (二)fiber的基本认识
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (五)IO流之ByteArrayInput/OutputStream
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • (转)h264中avc和flv数据的解析
  • (转)用.Net的File控件上传文件的解决方案