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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
浅析js封装和作用域
Jul 09 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
原生JS运动实现轮播图
Jan 02 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript数据结构与算法之检索算法
2015/04/04 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Node 代理访问的实现
2019/09/19 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
便利店促销方案
2014/02/20 职场文书
社区工作感言
2014/02/21 职场文书
干部下基层实施方案
2014/03/14 职场文书
大学生社会实践评语
2014/04/25 职场文书
普通党员对照检查材料
2014/09/24 职场文书
2014年学习部工作总结
2014/11/12 职场文书
求职推荐信范文
2015/03/27 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Java实现注册登录跳转
2022/06/16 Java/Android