jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
我們?cè)诓僮髁斜頂?shù)據(jù)的時(shí)候,需要將數(shù)據(jù)行排列順序進(jìn)行調(diào)整,如上移和下移行,將行數(shù)據(jù)置頂?shù)?,這些操作都可以在前端通過(guò)點(diǎn)擊按鈕來(lái)完成,并且伴隨著簡(jiǎn)單的動(dòng)態(tài)效果,輕松實(shí)現(xiàn)表格數(shù)據(jù)排序。
運(yùn)行效果圖:
HTML
頁(yè)面上是一個(gè)簡(jiǎn)單的數(shù)據(jù)表格,我們?cè)跀?shù)據(jù)行中分別放置“上移”,“下移”和“置頂”三個(gè)鏈接,并且分別定義三個(gè)class屬性,我們來(lái)通過(guò)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)的固定頁(yè)腳廣告條置頂</a></td> </tr> ... </table>
jQuery
我們需要預(yù)先把jQuery庫(kù)文件載入,然后分別綁定上移、下移和置頂三個(gè)操作的click事件。以“上移”為例,當(dāng)點(diǎn)擊時(shí),獲取當(dāng)前點(diǎn)擊的行內(nèi)容,及tr,然后判斷該行是不是第一行,如果不是第一行,那么就將該行插入到上一行的前面,實(shí)現(xiàn)了互換的目的。當(dāng)然我們可以給行加fadeOut()和fadeIn()過(guò)渡效果,這樣看起來(lái)會(huì)更生動(dòng)些,否則上移的過(guò)程會(huì)一閃而過(guò)。“下移”和“置頂”操作流程都差不多,請(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ì)解說(shuō)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
有一段時(shí)間沒(méi)用jquery了,今天又碰到這個(gè)問(wèn)題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。2011-08-08jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡
這篇文章主要介紹了jQuery EasyUI右鍵菜單實(shí)現(xiàn)關(guān)閉標(biāo)簽/選項(xiàng)卡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼
利用jQuery操作對(duì)象數(shù)組的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04jquery 操作日期、星期、元素的追加的實(shí)現(xiàn)代碼
主要實(shí)現(xiàn)日期的顯示,獲取年月日,時(shí)分秒、星期、判斷閏年,學(xué)習(xí)jquery的朋友可以參考下2012-02-02jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12JQuery textlimit 顯示用戶(hù)輸入的字符數(shù) 限制用戶(hù)輸入的字符數(shù)
顯示用戶(hù)輸入的字符數(shù) 限制用戶(hù)輸入的字符數(shù)的實(shí)現(xiàn)方法。2009-05-05jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(一)
ajax聯(lián)動(dòng)框想必大家早有所耳聞,接下來(lái)本文詳細(xì)介紹下使用jquery實(shí)現(xiàn)的原理及代碼,感興趣的你可以參考下,或許對(duì)你有所幫助2013-03-03詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫(kù)和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08