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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JS严格模式知识点总结
Feb 27 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 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调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP导入导出Excel代码
2015/07/07 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python 判断网络连通的实现方法
2018/04/22 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python requests 测试代理ip是否生效
2018/07/25 Python
对Python中plt的画图函数详解
2018/11/07 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
为什么python比较流行
2020/06/19 Python
详解Flask前后端分离项目案例
2020/07/24 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
MySQL分库分表详情
2021/09/25 MySQL