直接上代码


            //上移
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. CTF——代码审计之变量覆盖漏洞writeup【2】

    题目: 基础: 所需基础知识见变量覆盖漏洞[1]  分析: 现在的$a=’hi’,而下面的函数需满足$a=’jaivy’才可以输出flag,那么需要做的事就是想办法覆盖掉$a原来的值. 那么出现的提示 ...

  2. 2020牛客寒假算法基础集训营1 J. 缪斯的影响力 (矩阵快速幂/费马小定理降幂)

    https://ac.nowcoder.com/acm/problem/200658 f(n) = f(n-1) * f(n-2) * ab ,f的第一项是x,第二项是y. 试着推出第三项是x·y·a ...

  3. Hibernate的理论知识点

    转自网络 一. 对象持久化的理论 1.对象持久化:内存中的对象转存到外部持久设备上,在需要的时候还可以恢复. 2.对象持久化的原因(目标): 物理: 1) 内存不能持久,需要在硬盘上持久保存 //(物 ...

  4. AcWing 1020. 潜水员 二维费用背包

    //体积最多是j 全部为0,v>=0 //体积恰好为j f[0][0]=0,f[i]=无穷,v>=0 //体积至少是j f[0][0]=0,f[i]=无穷,体积为负数时于0取大 #incl ...

  5. ubuntu18+caffe+cuda

    昨天安装caffe,因为用的是cuda10.2,遇到各种问题,最终也没有安装成功.使用cmake配置成功.生成成功.编译的时候报错. /usr/local/cuda/include/cuda_runt ...

  6. 使用Python发送、订阅消息

    使用Python发送.订阅消息 使用插件 paho-mqtt 官方文档:http://shaocheng.li/post/blog/2017-05-23 Paho 是一个开源的 MQTT 客户端项目, ...

  7. Radar Installation(利用数据有序化进行贪心选择)

    English appre: an infinite straight line:一条无限长的直线 on the coasting:在海岸线上 Cartesian coordinate system, ...

  8. 【NOIP2001普及组】最大公约数和最小公倍数问题

    P1029 最大公约数和最小公倍数问题 最大公约数用辗转相除法: 最小公倍数:两个数的乘积=他们的最大公约数*最小公倍数,既然两个数的乘积及其最大公约数已知,那么最小公倍数也可以求了. #includ ...

  9. DE1-soc软件实验”hello_word"

    此实验需要工具:win32disk,路由器,sd卡,Embeed Design suite, Putty,usb to uart 驱动 选择文件,在拷贝到sd卡中去:烧写的文件是官方提供的SD卡的程序 ...

  10. Asp.net的WebForm的落后技术

    本文链接:https://bbs.csdn.net/topics/392077893 因为webform确实,企图通过在html标签中的runat="server",在iis接受请 ...