直接上代码


            //上移
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. cmd 运行py脚本,提示找不到xx模块

    一.在学习Django+接口自动化测试,用Jenkins做定时任务,cmd运行脚本时提示 "找不到xx模块": 1.原因:Pycharm单独运行脚本时没问题,cmd运行找不到模块. ...

  2. 巨杉数据库入选年度Gartner Peer Insights报告,获得市场高度评价

    Gartner Peer Insights 年度评选结果于近日出炉,在数据库管理系统市场报告中,巨杉数据库获得了总平均分4.7(满分5分)的成绩,在众多国际厂商中位居第三,是国内唯一一家入选的数据库厂 ...

  3. ARM(哈弗、冯氏结构、总线和IO访问、处理器状态和处理机模式)

    1.哈弗结构与冯氏结构 (1)区别: 是否有独立的存储架构和信号通道. (2)举例: 8086:冯氏结构(相同的存储相同的通道) STM32F103:哈弗结构(不同的存储.通道) 8051:改进的哈弗 ...

  4. 用html5自带表单验证 并且用ajax提交的解决方法(附例子)

    用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...

  5. Unity 坐标系转换

    在Unity中我们通常会用到以下几个坐标系下的点: 世界坐标系:World Space 简单来讲,我们通过 transform.position | transform.rotation 获取得到的位 ...

  6. js基础心得

    最近有想法研究jQuery源码,一顿查阅顿感自己基础薄弱.手中正好有一本js高程,遂决定深入js基础,并记录心得至博客园.以待一举攻克jQuery,VUE等源码. 1,变量.作用域和内存问题 2,引用 ...

  7. Docker常用命令及脚本

    1.常用命令 docker          search centos                                #搜索镜像              pull centos   ...

  8. 解决:配置虚拟主机,重启apache,[warn] _default_ VirtualHost overlap on port 80, the first has precedence

    http://blog.csdn.net/kaizhu_qin/article/details/17506293 很多第一次配置apache的虚拟主机的时候,以为配置第一个虚拟主机完成以后,以后就不会 ...

  9. RTMP服务器搭建(nginx+rtmp)

    参考文章:https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.5 ...

  10. FLV文件格式分析(附源码)

    FLV文件主要由两部分组成:Header和Body. 1. Header header部分记录了flv的类型.版本等信息,是flv的开头,一般都差不多,占9bytes.具体格式如下: 文件类型 3 b ...