萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現表格行上下移動和置頂效果

jQuery實現表格行上下移動和置頂效果

   本文給大家分享的是一款由jQuery實現的表格行上下移動以及置頂效果的代碼,非常的簡單實用,這裡給出了核心代碼,有需要的小伙伴可以參考下。

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

  HTML

  頁面上是一個簡單的數據表格,我們在數據行中分別放置“上移”,“下移”和“置頂”三個鏈接,並且分別定義三個class屬性,我們來通過jQuery實現這些操作。

  ?

1 2 3 4 5 6 7 8 9 10 11 12   <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()過渡效果,這樣看起來會更生動些,否則上移的過程會一閃而過。“下移”和“置頂”操作流程都差不多,請看代碼:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31   $(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能夠有所幫助。

copyright © 萬盛學電腦網 all rights reserved