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異步交互，保證排序數據真正被後台記錄，然後刷新後會展示新的排序結果，本文不再對此非同步操作做詳細解說，就此結題。

以上所述就是本文的全部內容了，希望對大家學習jQuery能夠有所幫助。