jQuery表格行上移下移和置顶的实现方法


Posted in Javascript onOctober 08, 2015

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

运行效果图:

jQuery表格行上移下移和置顶的实现方法

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异步交互,保证排序数据真正被后台记录,然后刷新后会展示新的排序结果,本文不再对该异步操作做详细解说。

Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
javascript cookies操作集合
Apr 12 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
js编写选项卡效果
May 23 Javascript
VUE重点问题总结
Mar 19 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 #Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
You might like
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
详解Python多线程
2016/11/14 Python
python MySQLdb使用教程详解
2018/03/20 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python超时重新请求解决方案
2019/10/21 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python实现把类当做字典来访问
2019/12/16 Python
python实现tail -f 功能
2020/01/17 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
Python使用openpyxl复制整张sheet
2021/03/24 Python
旷课检讨书1000字
2014/02/14 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
股东协议书范本2016
2016/03/21 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android