欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery表格行上移下移和置頂?shù)膶崿F(xiàn)方法

 更新時間:2022年02月22日 09:56:11   投稿:lijiao  
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶崿F(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

運行效果圖:

HTML

頁面上是一個簡單的數(shù)據(jù)表格,我們在數(shù)據(jù)行中分別放置“上移”,“下移”和“置頂”三個鏈接,并且分別定義三個class屬性,我們來通過jQuery實現(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實現(xiàn)的固定頁腳廣告條置頂</a></td> 
 </tr> 
 ... 
</table> 

jQuery

我們需要預(yù)先把jQuery庫文件載入,然后分別綁定上移、下移和置頂三個操作的click事件。以“上移”為例,當(dāng)點擊時,獲取當(dāng)前點擊的行內(nèi)容,及tr,然后判斷該行是不是第一行,如果不是第一行,那么就將該行插入到上一行的前面,實現(xiàn)了互換的目的。當(dāng)然我們可以給行加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"); 
 }); 
}); 

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論