夏日博客

A-A+

基于jQuery的表格行上移下移和置顶效果代码

2016年01月11日 前端设计 暂无评论 阅读 5 views 次

表格行上移下移和置顶有点像排序效果是一样的，我们以前介绍的都是通过js来实现，现在也是用js不过是升级版本的jquery实现表格行上移下移和置顶功能了，具体的例子如下所示。

基于jQuery的表格行上移下移和置顶效果代码HTML.

页面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。

  1. <table class="table">   
  2.     <tr>   
  3.         <td>HTML5获取地理位置定位信息</td>   
  4.         <td>2015-04-25</td>   
  5.         <td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置顶</a></td>   
  6.     </tr>   
  7.     <tr>   
  8.         <td>CSS+Cookie实现的固定页脚广告条置顶</a></td>   
  9.     </tr>   
  10.     ...   
  11. </table>  

jQuery

我们需要预先把jQuery库文件载入，然后分别绑定上移、下移和置顶三个操作的click事件。以“上移”为例，当点击时，获取当前点击的行内容，及tr，然后判断该行是不是第一行，如果不是第一行，那么就将该行插入到上一行的前面，实现了互换的目的。当然我们可以给行加fadeOut()和fadeIn()过渡效果，这样看起来会更生动些，否则上移的过程会一闪而过。“下移”和“置顶”操作流程都差不多，请看代码：

  1. $(function(){   
  2.     //上移   
  3.     var $up = $(".up")   
  4.     $up.click(function() {   
  5.         var $tr = $(this).parents("tr");   
  6.         if ($tr.index() != 0) {   
  7.             $tr.fadeOut().fadeIn();   
  8.             $tr.prev().before($tr);   
  9.                
  10.         }   
  11.     });   
  12.     //下移   
  13.     var $down = $(".down");   
  14.     var len = $down.length;   
  15.     $down.click(function() {   
  16.         var $tr = $(this).parents("tr");   
  17.         if ($tr.index() != len - 1) {   
  18.             $tr.fadeOut().fadeIn();   
  19.             $tr.next().after($tr);   
  20.         }   
  21.     });   
  22.     //置顶   
  23.     var $top = $(".top");   
  24.     $top.click(function(){   
  25.         var $tr = $(this).parents("tr");   
  26.         $tr.fadeOut().fadeIn();   
  27.         $(".table").prepend($tr);   
  28.         $tr.css("color","#f60");   
  29.     });   
  30. });  

当然，实际应用中应该结合您的项目，在操作“上移”，“下移”和“置顶”完成时，应该和后台程序进行Ajax异步交互，保证排序数据真正被后台记录，然后刷新后会展示新的排序结果，本文不再对该异步操作做详细解说，就此结题。

标签：

给我留言