直接上代码


            //上移
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. Session方法

    Session的save()和persist()方法Session的save()方法使一个临时对象转变为持久化对象.它完成以下操作:(1)将临时对象加入到Session缓存中,使其进入持久化状态.(2 ...

  2. Zookeeper学习笔记一

    目录 一.zookeeper介绍 二.Zookeeper安装 一.zookeeper介绍 1.概述   Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目.Hadoop ...

  3. IDEA工具java开发之 运行与调试

    一.运行项目 ◆右键运行 ◆菜单运行 ◆run窗口运行 ◆启动参数 作用:经常用在本地开发环境要去连测试的数据库的时候使用.正常的情况下是连开发环境的数据库的,但是有些情况是需要连测试数据库的.所以这 ...

  4. 前端Css学习

    CSS 称为层叠样式表 css样式引入方式 第一种 head标签中引入 <style> /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ /* css注释 ...

  5. 题解【洛谷P1314】[NOIP2011]聪明的质监员

    题面 题解 不难发现,\(W\)增大时,\(Y\)值会随之减小. 于是考虑二分\(W\). 如何\(\mathcal{O}(N)check?\) 每一次前缀和记录一下\(1-i\)之间\(w_i \g ...

  6. linux 中对 mysql 数据库的基本命令

    显示数据库列表 show databases; 显示库中的数据表 use mysql: // 打开库 show tables; 建库 create database 库名; 建库是设置好字符编码: c ...

  7. JQuery-Snowfall降雪插件使用

        一个很好使用的降雪插件,可以实现雪花.爱心.图片等下降落. 1.JQuery-Snowfall插件的使用方法: 增加了使用图像作为雪花而不是纯色元素的功能. $(element).snowfa ...

  8. Mybatis- 基础知识

        mybatis是一个java持久层框架,java中操作关系型 数据库用的是jdbc,mybatis是对jdbc的一个封装. 简介 iBATIS一词来源于"internet" ...

  9. python3练习100题——006

    继续做题-经过py3测试 原题链接:http://www.runoob.com/python/python-exercise-example6.html 题目:斐波那契数列. 我的代码: def fi ...

  10. tensorflow学习笔记——GoogLeNet

    GoogLeNet是谷歌(Google)研究出来的深度网络结构,为什么不叫“GoogleNet”,而叫“GoogLeNet”,据说是为了向“LeNet”致敬,因此取名为“GoogLeNet”,所以我们 ...