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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
Vue 实现手动刷新组件的方法
Feb 19 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 正则表达式小结
2009/08/31 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
js正则取值的结果数组调试方法
2018/10/10 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
理解Python中函数的参数
2015/04/27 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python多进程控制学习小结
2018/10/31 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
在python中修改.properties文件的操作
2020/04/08 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
static关键字的用法
2013/10/07 面试题
当当网软件测试笔试题
2015/11/24 面试题
教师党员整改措施
2014/10/24 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis