jQuery实现表格行上下移动和置顶效果


Posted in Javascript onJune 05, 2015

我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序。

HTML

页面上是一个简单的数据表格,我们在数据行中分别放置“上移”,“下移”和“置顶”三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作。

<table class="table"> 
  <tr> 
    <td>HTML5获取地理位置定位信息</td> 
    <td>2015-04-25</td> 
    <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td> 
  </tr> 
  <tr> 
    <td>CSS+Cookie实现的固定页脚广告条置顶</a></td> 
  </tr> 
  ... 
</table>

jQuery

我们需要预先把jQuery库文件载入,然后分别绑定上移、下移和置顶三个操作的click事件。以“上移”为例,当点击时,获取当前点击的行内容,及tr,然后判断该行是不是第一行,如果不是第一行,那么就将该行插入到上一行的前面,实现了互换的目的。当然我们可以给行加fadeOut()和fadeIn()过渡效果,这样看起来会更生动些,否则上移的过程会一闪而过。“下移”和“置顶”操作流程都差不多,请看代码:

$(function(){ 
  //上移 
  var $up = $(".up") 
  $up.click(function() { 
    var $tr = $(this).parents("tr"); 
    if ($tr.index() != 0) { 
      $tr.fadeOut().fadeIn(); 
      $tr.prev().before($tr); 
       
    } 
  }); 
  //下移 
  var $down = $(".down"); 
  var len = $down.length; 
  $down.click(function() { 
    var $tr = $(this).parents("tr"); 
    if ($tr.index() != len - 1) { 
      $tr.fadeOut().fadeIn(); 
      $tr.next().after($tr); 
    } 
  }); 
  //置顶 
  var $top = $(".top"); 
  $top.click(function(){ 
    var $tr = $(this).parents("tr"); 
    $tr.fadeOut().fadeIn(); 
    $(".table").prepend($tr); 
    $tr.css("color","#f60"); 
  }); 
});

当然,实际应用中应该结合您的项目,在操作“上移”,“下移”和“置顶”完成时,应该和后台程序进行Ajax异步交互,保证排序数据真正被后台记录,然后刷新后会展示新的排序结果,本文不再对该异步操作做详细解说,就此结题。

以上所述就是本文的全部内容了,希望对大家学习jQuery能够有所帮助。

Javascript 相关文章推荐
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
Js 中debug方式
Feb 07 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
js获取滚动距离的方法
May 30 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 #Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 #Javascript
javascript实现删除前弹出确认框
Jun 04 #Javascript
jquery插件validation实现验证身份证号等
Jun 04 #Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 #Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 #Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 #Javascript
You might like
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
万能的php分页类
2017/07/06 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python读写文件方法总结
2015/06/09 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
聊聊python中的异常嵌套
2020/09/01 Python
文明家庭先进事迹材
2014/01/27 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
出生公证委托书
2014/04/03 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
公民授权委托书范本
2014/09/17 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
校运会加油稿大全
2015/07/22 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
如何Python使用re模块实现okenizer
2022/04/30 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS