快捷導(dǎo)航

jQuery實(shí)現(xiàn)表格行上下移動(dòng)和置頂效果

更新時(shí)間：2015年06月05日 09:21:56 投稿：hebedich

本文給大家分享的是一款由jQuery實(shí)現(xiàn)的表格行上下移動(dòng)以及置頂效果的代碼，非常的簡(jiǎn)單實(shí)用，這里給出了核心代碼，有需要的小伙伴可以參考下。

我們?cè)诓僮髁斜頂?shù)據(jù)的時(shí)候，需要將數(shù)據(jù)行排列順序進(jìn)行調(diào)整，如上移和下移行，將行數(shù)據(jù)置頂?shù)龋@些操作都可以在前端通過點(diǎn)擊按鈕來完成，并且伴隨著簡(jiǎn)單的動(dòng)態(tài)效果，輕松實(shí)現(xiàn)表格數(shù)據(jù)排序。

HTML

頁面上是一個(gè)簡(jiǎn)單的數(shù)據(jù)表格，我們?cè)跀?shù)據(jù)行中分別放置“上移”，“下移”和“置頂”三個(gè)鏈接，并且分別定義三個(gè)class屬性，我們來通過jQuery實(shí)現(xiàn)這些操作。

 
<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實(shí)現(xiàn)的固定頁腳廣告條置頂</a></td> 
  </tr> 
  ... 
</table>

jQuery

我們需要預(yù)先把jQuery庫文件載入，然后分別綁定上移、下移和置頂三個(gè)操作的click事件。以“上移”為例，當(dāng)點(diǎn)擊時(shí)，獲取當(dāng)前點(diǎn)擊的行內(nèi)容，及tr，然后判斷該行是不是第一行，如果不是第一行，那么就將該行插入到上一行的前面，實(shí)現(xiàn)了互換的目的。當(dāng)然我們可以給行加fadeOut()和fadeIn()過渡效果，這樣看起來會(huì)更生動(dòng)些，否則上移的過程會(huì)一閃而過?！跋乱啤焙汀爸庙敗辈僮髁鞒潭疾畈欢啵?qǐng)看代碼：

 
$(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"); 
  }); 
});

當(dāng)然，實(shí)際應(yīng)用中應(yīng)該結(jié)合您的項(xiàng)目，在操作“上移”，“下移”和“置頂”完成時(shí)，應(yīng)該和后臺(tái)程序進(jìn)行Ajax異步交互，保證排序數(shù)據(jù)真正被后臺(tái)記錄，然后刷新后會(huì)展示新的排序結(jié)果，本文不再對(duì)該異步操作做詳細(xì)解說，就此結(jié)題。

以上所述就是本文的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)jQuery能夠有所幫助。

您可能感興趣的文章: