使用jquery寫個(gè)更改表格行順序的小功能
更新時(shí)間：2014年04月29日 17:11:35 作者：
這篇文章主要介紹了使用jquery寫的更改表格行順序的小功能,需要的朋友可以參考下
周末寫了個(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
<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)記提交新的順序
吐槽：喊著加班=狼性的公司都是不適合正常人類生存的公司，把周末加班當(dāng)成鼓吹的事情&評(píng)價(jià)員工是否有狼性的標(biāo)準(zhǔ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)記提交新的順序
吐槽：喊著加班=狼性的公司都是不適合正常人類生存的公司，把周末加班當(dāng)成鼓吹的事情&評(píng)價(jià)員工是否有狼性的標(biāo)準(zhǔn)更是扯淡。
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁面頂端的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)滾動(dòng)到頁面頂端的方法,涉及jQuery針對(duì)頁面操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
仿中關(guān)村在線首頁彈出式廣告插件(jQuery版)
仿中關(guān)村在線首頁彈出式廣告插件(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 版開始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我們來看下具體的使用方法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并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法
這篇文章主要介紹了JQuery中使用ajax傳輸超大數(shù)據(jù)的解決方法,也就是比較多的數(shù)據(jù),超過max_upload_size等設(shè)置,本文方法在chrome瀏覽器下測(cè)試通過,需要的朋友可以參考下2014-07-07
本文給大家分享的是使用jQuery制作的組件，實(shí)現(xiàn)獲取data-自定義屬性，并附上使用方法，非常的實(shí)用，有需要的小伙伴可以參考下2015-11-11
基于JQuery的數(shù)字改變的動(dòng)畫效果--可用來做計(jì)數(shù)器
之前用javascript做個(gè)計(jì)數(shù)器，從網(wǎng)上搜了搜，找不到合適的，就想著用jquery自己做一個(gè)2010-08-08
在jQuery庫中，幾乎所有的插件都被限制在它的命名空間里。全局的對(duì)象都很好地存儲(chǔ)在jQuery命名空間里，因此當(dāng)把jQuery和其它javascript類庫一起使用時(shí)，不會(huì)引起沖突.2010-06-06