快捷導(dǎo)航

使用jquery寫(xiě)個(gè)更改表格行順序的小功能

更新時(shí)間：2014年04月29日 17:11:35 作者：

這篇文章主要介紹了使用jquery寫(xiě)的更改表格行順序的小功能,需要的朋友可以參考下

周末寫(xiě)了個(gè)更改表格行順序的小功能，直接貼代碼

表格部分如下：

 
<table class="table" id="test_table"> 
<thead> 
<tr> 
<th>時(shí)間</th> 
<th>詳情</th> 
<th>操作</th> 
</tr> 
</thead> 
<tbody> 
<tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line"> 
<td> 
2014-04-29 11:02:24 
</td> 
<td> 
詳情 
</td> 
<td> 
<span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span> 
<span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span> 
</td> 
</tr> 
<tr cid="7.0.0-2014-04-29_11-02-24_915" class="list_line"> 
<td> 
2014-04-28 10:00:00 
</td> 
<td> 
詳情 
</td> 
<td> 
<span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span> 
<span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span> 
</td> 
</tr> 
</tbody> 
</table> 

js代碼，其中會(huì)為要變更的行在變更順序后加上class=danger

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function(){ 
$('.move_btn').click(function(){ 
var move_act = $(this).attr('move_act'); 
$('#test_table tbody tr').removeClass('danger'); 

if(move_act == 'up'){ 
$(this).parent().parent('tr').addClass('danger') 
.prev().before($(this).parent().parent('tr')); 
} 
else if(move_act == 'down'){ 
$(this).parent().parent('tr').addClass('danger') 
.next().after($(this).parent().parent('tr')); 
} 
setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000); 
}); 
}); 
</script> 

更改后可以按照每行的唯一標(biāo)記提交新的順序

吐槽：喊著加班=狼性的公司都是不適合正常人類(lèi)生存的公司，把周末加班當(dāng)成鼓吹的事情&評(píng)價(jià)員工是否有狼性的標(biāo)準(zhǔn)更是扯淡。

您可能感興趣的文章:

表格行順序

相關(guān)文章

jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁(yè)面頂端的方法,涉及jQuery針對(duì)頁(yè)面操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
仿中關(guān)村在線(xiàn)首頁(yè)彈出式廣告插件(jQuery版)
仿中關(guān)村在線(xiàn)首頁(yè)彈出式廣告插件(jQuery版) ，需要的朋友可以參考下
2012-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)單的Ajax調(diào)用功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的Ajax調(diào)用功能,結(jié)合實(shí)例形式分析了jQuery的$.ajax方法與后臺(tái)php交互實(shí)現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開(kāi)始，移除了 $.browser 和 $.browser.version ，取而代之的是 $.support，下面我們來(lái)看下具體的使用方法
2014-05-05
servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼
現(xiàn)在文件的上傳，特別是大文件上傳，都需要進(jìn)度條。這篇文章主要介紹了servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼，有興趣的可以了解一下。
2017-01-01
jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱(chēng)的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱(chēng)的option方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過(guò)max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測(cè)試通過(guò),需要的朋友可以參考下
2014-07-07
使用jQuery獲取data-的自定義屬性
本文給大家分享的是使用jQuery制作的組件，實(shí)現(xiàn)獲取data-自定義屬性，并附上使用方法，非常的實(shí)用，有需要的小伙伴可以參考下
2015-11-11
基于JQuery的數(shù)字改變的動(dòng)畫(huà)效果--可用來(lái)做計(jì)數(shù)器
之前用javascript做個(gè)計(jì)數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個(gè)
2010-08-08
jQuery與其它庫(kù)沖突的解決方法
在jQuery庫(kù)中，幾乎所有的插件都被限制在它的命名空間里。全局的對(duì)象都很好地存儲(chǔ)在jQuery命名空間里，因此當(dāng)把jQuery和其它javascript類(lèi)庫(kù)一起使用時(shí)，不會(huì)引起沖突.
2010-06-06