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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 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
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
2014年秋季开学典礼主持词
2014/08/02 职场文书
工程部经理岗位职责
2015/02/02 职场文书
毕业论文致谢信
2015/05/14 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2015入党个人自传范文
2015/06/26 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js