jquery實(shí)現(xiàn)更改表格行順序示例
更新時(shí)間：2014年04月30日 10:34:55 作者：
本文主要介紹了jquery實(shí)現(xiàn)更改表格行順序示例,大家參考使用吧
表格部分如下：
復(fù)制代碼 代碼如下:
<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)記提交新的順序
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家分享一篇JQuery選中select組件被選中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
jQuery的顯示和隱藏方法與css隱藏的樣式對(duì)比
display:none和visible:hidden都能把網(wǎng)頁(yè)上某個(gè)元素隱藏起來(lái)，而jQuery的顯示和隱藏又有哪些方法，在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
jQuery.event兼容各瀏覽器的event詳細(xì)解析
jQuery在遵循W3C規(guī)范的情況下，對(duì)事件的常用屬性進(jìn)行了封裝，使得事件處理在各大瀏覽器下都可以正常的運(yùn)行而不需要進(jìn)行瀏覽器類型判斷2013-12-12
騰訊與新浪的通過(guò)IP地址獲取當(dāng)前地理位置（省份）的接口
通過(guò)IP地址獲取當(dāng)前地理位置（省份）的接口，方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07
本文主要介紹了jQuery的ready方法的使用方法，用此方法實(shí)現(xiàn)了當(dāng)爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。2014-11-11
這篇文章主要介紹了jQuery元素選擇器用法,通過(guò)一個(gè)簡(jiǎn)單的隱藏div元素實(shí)例講述了元素選擇器的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
瀏覽器窗口大小變化時(shí)使用resize事件對(duì)框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小，但對(duì)框架卻不起作用，這里介紹下實(shí)現(xiàn)方法，需要的朋友可以參考下2014-05-05
這篇文章主要介紹了使用jQuery管理選擇結(jié)果的相關(guān)資料,需要的朋友可以參考下2015-01-01
兩個(gè)select之間option的互相添加操作(jquery實(shí)現(xiàn))
兩個(gè)select,將其中一個(gè)select選中的選項(xiàng)添加到另一個(gè)select中,或者點(diǎn)擊全部添加按鈕將所有的option都添加過(guò)去.2009-11-11
這段代碼是我在做13年一份兼職的時(shí)候無(wú)聊加上去的，為jQuery添加觸摸事件的支持。因?yàn)樽龅糜悬c(diǎn)無(wú)聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁(yè)+JS touch兼容了移動(dòng)設(shè)備，主要是Webkit的移動(dòng)設(shè)備2014-02-02