45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何在jQuery表格中实现上移下移和置顶?

如何在jQuery表格中实现上移下移和置顶?

2016-06-04 13:33:11 来源:www.45fan.com 【

如何在jQuery表格中实现上移下移和置顶?

我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序。

运行效果图:

如何在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异步交互,保证排序数据真正被后台记录,然后刷新后会展示新的排序结果,本文不再对该异步操作做详细解说。


本文地址:http://www.45fan.com/bcdm/52225.html
Tags: jquery 表格 上移
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部