首頁 >web前端 >js教程 >jQuery表格行上移下移和置頂的實作方法_jquery

jQuery表格行上移下移和置頂的實作方法_jquery

WBOY
WBOY原創
2016-05-16 15:37:171689瀏覽

我們在操作清單資料的時候,需要將資料行排列順序進行調整,如上移和下移行,將行資料置頂等,這些操作都可以在前端透過點擊按鈕來完成,並且伴隨著簡單的動態效果,輕鬆實現表格資料排序。

運作效果圖:

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn