直接上代码


            //上移
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. Docker之设置加速器

    在Docker从仓库下载镜像是非常慢的,所以今天搞一个Docker设置加速器教程. 1. 创建一个Docker的配置文件. sudo vim /etc/docker/daemon.json 2. 编写 ...

  2. vscode里的NPM脚本

    NPM脚本的开启与关闭 点击设置-功能-任务 控制为所有任务提供程序扩展启用"提供任务".如果"任务:运行任务"命令速度较慢,则禁用任务提供程序的自动检测可能会 ...

  3. 基于Python的face_recognition库实现人脸识别

    一.face_recognition库简介 face_recognition是Python的一个开源人脸识别库,支持Python 3.3+和Python 2.7.引用官网介绍: Recognize a ...

  4. STM 32 内部功能回顾

    EXTI   外部中断 NVIC 嵌套的向量式中断控制器 AHB 是高级高性能内部总线,主要是用在CPU.DMA.DSP(数字信号处理) APB 是外围总线,I2C. 串口 APB 分为高速APB2( ...

  5. 如何在Word中排出漂亮的代码,去除回车符,去除拼写检查

    这位博主写到很到位,这里补充一下在VBA里用模块的部分. https://blog.csdn.net/code4101/article/details/41802715 1.放代码的方式是贴纯文本. ...

  6. python3爬取高清壁纸(1)

    这次爬取的目标是:美桌网首页 > 桌面壁纸 > 卡通动漫 类别下的壁纸. 我们先随机选取一个专辑来爬(http://www.win4000.com/wallpaper_detail_545 ...

  7. 用python脚本测试接口

    自己写一个脚本,统计调用200次接口的请求时长. # -*- coding=utf-8 -*-import osimport requestsimport time url = "http: ...

  8. 如何在Go中获得 "A1","B2" 类似字符+数字的字符串

    package main import ( "fmt" ) func main() { // 字符串 str := "ABCDEFGHIJKLMNOPQRSTUVWXYZ ...

  9. Go之第三方库ini

    文章转自 快速开始 my.ini # possible values : production, development app_mode = development [paths] # Path t ...

  10. Django_静态文件/中间件/分页

    1. 静态文件配置 2. 中间件 在不修改源代码的前提下,动态的逻辑控制代码执行(装饰器) 2.1 切入函数 2.2 自定义中间件 中奖 访问限制 2.3 分页 paginator 常见错误