溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“jQuery怎么實現表格行上移下移和置頂”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
我們在操作列表數據的時候，需要將數據行排列順序進行調整，如上移和下移行，將行數據置頂等，這些操作都可以在前端通過點擊按鈕來完成，并且伴隨著簡單的動態效果，輕松實現表格數據排序。
頁面上是一個簡單的數據表格，我們在數據行中分別放置“上移”，“下移”和“置頂”三個鏈接，并且分別定義三個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實現的固定頁腳廣告條>
<td>2015-04-18</td>
<td><a href="#" class="up">上移</a> <a href="#" class="down">下移</a> <a href="#" class="top">置頂</a></td>
</tr>
...
</table>
我們需要預先把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怎么實現表格行上移下移和置頂”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
