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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
微信小程序 教程之模板
Oct 18 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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服务器验证实例详解
2017/03/30 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
canvas时钟效果
2017/02/16 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
保护黄河倡议书
2014/05/16 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
主持人开幕词
2015/01/29 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL