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

var up = "<a href=\"javascript:void(0)\" onclick=\"moveUp(this)\">上移</a>";
                var down = "<a href=\"javascript:void(0)\" onclick=\"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

时间: 2024-10-31 19:28:53

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

前端页面——js如何让数据传输更灵活

我们之前已经说过一些关于前端页面的问题,今天我们来说说数据如何在页面和部分视图之间传递. 我们的项目中最基本的功能就是增.删.改.查.那么我们在实现的时候就会在主视图上添加一些部分视图,页面加载的时候我们先影藏部分视图,当单击添加或者修改的时候,再显示相应的部分视图.那么当我们在修改的时候,数据是如何变化的呢? 一.整体过程图 我们先来看看这个变化过程的整体图. 二.过程讲解 1.页面加载 已组织机构页面为例,当我们加载时,需要查询出所有的组织机构 1.1主视图的加载url <div id=&quo

前端页面有哪三层构成 兼容性

[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式:        加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          IE6的触发        在XHTML的DOCTYPE前加入XML声明  <?xml version="1.0"

前端小demo——表格增删

模拟录入成绩系统,对数据在前端页面进行增删. 点击生成表格按钮,自动生成一个表格,这里的数据是写死的.可以进行删除. 点击添加按钮,自动生成一行,在输入框内输入相关内容,点击确定,生成新数据. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { t

Python之路-(js正则表达式、前端页面的模板套用、Django基础)

js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配 登录注册验证: test: 判断字符串是否符合规定的规则 rep = /\d+/;   (定义规则) rep.test('')   (引号里面必须包含字母和数字才返回true,否则为false) rep = /^\d+$/; (只有是纯数字时候才返回true,否则是false) exe

用github来展示你的前端页面吧

前言 经常会有人问我如何才能将自己做的静态页面放到网上供他人欣赏,是不是需要自己有一个服务器,是不是还要搞个域名才能访问?对于以上问题我都会回答:用github来展示你的前端页面吧. 工欲善其事,必先利其器.github是一个很好的代码管理与协同开发平台,在程序界又被称为最大的"同性交友网站".如果你不懂git,没有自己的github账户,那你就丢失了一把能够很好的展示自我,储存知识的利器. 当然知道github的人不在少数,但是大部分人可能仅知道它可以用于管理我们的项目代码,而不知道

OpenXml入门----给Word文档添加表格

下面将展示如何使用Openxm向Word添加表格. 代码中表头和数据我用的同一个TableRow来添加,其实可以通过TableHeader来,其实都一样.后面教程我会给出如何设置单元格样式.表头那一行可以自己通过设置样式来控制 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Document

ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据,然后赋值给前端页面 HTML <meta> 标签添加 HtmlMeta mtdes = new HtmlMeta();//新建实例 mtdes.Name = "Description";//标签 mtdes.Content = this.Descriptionp;//内容 H

移动前端页面开发需要注意的20个要点

1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-ap

servlet自动获取前端页面提交数据

servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+MyBatis进行数据持久化的过程.这里只介绍页面到servlet(controller)提交数据封装对象的过程,MVC+MyBatis访问数据库不在这里介绍. 1.前端页面及代码 1)前端表单页面构建(用于测试简单构建的页面有点丑陋哦~) 2)前端jsp页面代码   这里使用了Ajax异步 get