直接上代码


            //上移
var $up = $(".up")
$up.click(function () {
var $tr = $(this).parents("tr");
if ($tr.index() > 1) {
$tr.fadeOut().fadeIn();
$tr.prev().before($tr);
changeSort = 1;
}
});
//下移
var $down = $(".down");
var len = $down.length;
$down.click(function () {
var $tr = $(this).parent().parents("tr");
if ($tr.index() != len) {
$tr.fadeOut().fadeIn();
$tr.next().after($tr);
changeSort = 1;
}
});

然后描述一下具体的需求:

首先在页面上展示了所有的列表数据,用table 的格式展示,然后需要对数据列进行排序,整列上移或者下移。如上,即可实现效果,但是要根据自己的页面情况进行调整

  if ($tr.index() > 1)    if ($tr.index() != len)     这两个条件

js实现上移下移的更多相关文章

  1. JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

  3. javaWeb上移下移(SpringMVC+Mabits+MySql)

    文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...

  4. AngularJS实现数据列表的增加、删除和上移下移等功能实例

      转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...

  5. php修改排序,上移下移

    php修改排序,上移下移 /**    $UpDown //移动方向,up或down    $table //表名    $id //当前移动的ID    $id_col //ID字段的名称    $ ...

  6. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  7. jqgrid 上移下移单元格

    在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...

  8. wpf listbox 选中项 上移下移

    原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e)         {        ...

  9. vue 实现模块上移下移 实现排序

    效果图 上移 下移 首先想到的是 数组的相互替换嘛 <template> <div> <div class="box" v-for="(it ...

随机推荐

  1. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  2. Qt程序异常结束,The process was ended forcefully....

    我用的Qt版本是5.9.6,运行了好几次程序都妥妥当当的,然后就被安排上了...出现如下错误: 也是刚入手Qt不久,出现这样的错误我以为是代码的问题,然后撤销一些代码发现还是这样的错,索性就关闭Qt然 ...

  3. AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解

    AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解 javascriptvue-clicommonjswebpackast  阅读约 27 分钟 抽象语法树(AST),是一 ...

  4. 番外:克隆本地PDB中其他参数和子句的说明

    基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆本地PDB(从本地其他PDB创建新的PDB) 对应路径:Creating a PDB --> Cloning --> ...

  5. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  6. HBase 中读 HDFS 调优

    HDFS Read调优 在基于 HDFS 存储的 HBase 中,主要有两种调优方式: 绕过RPC的选项,称为short circuit reads 开启让HDFS推测性地从多个datanode读数据 ...

  7. 题解【洛谷P3884】[JLOI2009]二叉树问题

    题面 题解 这道题目可以用很多方法解决,这里我使用的是树链剖分. 关于树链剖分,可以看一下我的树链剖分学习笔记. 大致思路是这样的: 第\(1\)次\(dfs\)记录出每个点的父亲.重儿子.深度.子树 ...

  8. 数据库程序接口——JDBC——初篇——目录

    目录 建立连接 核心对象 Driver DriverManager Connection DataSource 常用功能 第一个程序 C3P0数据源 DBCP数据源 事务之Spring事务 执行SQL ...

  9. Codeforces Round #619 (Div. 2)D(模拟)

    先把一种最长路线记录下来,根据k的大小存到ans中相应的答案再输出 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using n ...

  10. java程序启动参数

    例如 启动进程如下 /home/work/noah/ccs/jc-controller/jdk1.7.0_55/bin/java -Xmx4096m -Xms4096m -Xmn1024m -XX:+ ...