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

2024-05-06 16:21:23

字體：大中小

來源：轉載

供稿：網友

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

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

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");

});

});