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字符串String和Array操作的有趣方法
Dec 18 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
JS+CSS实现过渡特效
Jan 02 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实现数据分页显示的简单实例
2016/05/26 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python实现简单猜单词游戏
2020/12/24 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
巾帼建功标兵事迹材料
2014/05/11 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
校园运动会广播稿
2015/08/19 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS