js实现上移下移
直接上代码
//上移
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实现上移下移的更多相关文章
- JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- table中实现数据上移下移效果
html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...
- javaWeb上移下移(SpringMVC+Mabits+MySql)
文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...
- AngularJS实现数据列表的增加、删除和上移下移等功能实例
转: http://www.jb51.net/article/91991.htm 这篇文章给大家分享了AngularJS循环实现数据列表的增加.删除和上移下移等基础功能,对大家学习AngularJ ...
- php修改排序,上移下移
php修改排序,上移下移 /** $UpDown //移动方向,up或down $table //表名 $id //当前移动的ID $id_col //ID字段的名称 $ ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- jqgrid 上移下移单元格
在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...
- wpf listbox 选中项 上移下移
原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e) { ...
- vue 实现模块上移下移 实现排序
效果图 上移 下移 首先想到的是 数组的相互替换嘛 <template> <div> <div class="box" v-for="(it ...
随机推荐
- unity中添加音量控制的一些步骤
1.先确认要控制的音源(Audio Source)所使用的输出(Output),例如我这里BGM使用的是MainMixer: 2.暴露音量(Volume)参数,让脚本可以控制.这里如果不暴露出来,脚本 ...
- 创建spring boot 项目
1.新建Spring Starter Project(需要连接外网) 2.选择web 3.点击完成,生成maven项目 pom文件默认有一些依赖,但是有一个地方报错,<parent>节点报 ...
- 基本程序单元Activity
Activity的4种状态,运行状态,暂停状态,停止状态,销毁状态,下面就是生命周期的顺序图 手动创建Activity 1.创建继承自Activity的Activity 2.重写需要的回调方法 3.设 ...
- 根据CPU内核创建多进程
from multiprocessing import Pool import psutil cpu_count = psutil.cpu_count(logical=False) #1代表单核CPU ...
- 关于gets读入因为缓冲区出现的问题
今天被一个同学丢了代码求debug 然后发现bug挺有意思的,稍微记录一下 首先我们读入的东西都会被丢进缓冲区等待接收,比如abc\n,如果你使用scanf读入的话,它在读入到\n的时候就会提取它需要 ...
- vue插槽(slot)的模板与JSX写法
vue官网API: 插槽:https://cn.vuejs.org/v2/guide/components-slots.html JSX:https://cn.vuejs.org/v2/guide/r ...
- java基础之 数据类型
数据类型表示要存储在变量中的不同类型的值. 一.Java语言提供了八种基本数据类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. 1. byte byte 数据类型是8位.有 ...
- xpath解析html标签
最近忙一个需求:把一个字符串形式的html文档转化成excel. 分解需求: ① 实现语言 ———— python ② html解析 ———— 用 lxml库的etree工具,xpath方式解析文档树 ...
- golang中的net/rpc包
本文先介绍RPC,然后go原生对RPC的使用,之后是介绍go语言中有哪些RPC框架以及一些其他常见的框架,最后是探究go语言中rpc的源码. (1)首先介绍下什么RPC? (2)RPC可以做什么? ( ...
- C语言 strlen
C语言 strlen #include <string.h> size_t strlen(const char *s); 功能:计算指定指定字符串s的长度,不包含字符串结束符‘\0’ 参数 ...