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 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
js实现tab切换效果实例
Sep 16 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
详解JS中的柯里化(currying)
Aug 17 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
利用vue和element-ui设置表格内容分页的实例
Mar 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
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
总经理助理工作职责
2014/02/06 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
继承权公证书范本
2015/01/23 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书