使用jquery寫個更改表格行順序的小功能
更新時間：2014年04月29日 17:11:35 作者：
這篇文章主要介紹了使用jquery寫的更改表格行順序的小功能,需要的朋友可以參考下
周末寫了個更改表格行順序的小功能，直接貼代碼
表格部分如下：
<table class="table" id="test_table">
<thead>
<tr>
<th>時間</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代碼，其中會為要變更的行在變更順序后加上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>
更改后可以按照每行的唯一標記提交新的順序
吐槽：喊著加班=狼性的公司都是不適合正常人類生存的公司，把周末加班當成鼓吹的事情&評價員工是否有狼性的標準更是扯淡。
表格部分如下：
復制代碼 代碼如下:
<table class="table" id="test_table">
<thead>
<tr>
<th>時間</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代碼，其中會為要變更的行在變更順序后加上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>
更改后可以按照每行的唯一標記提交新的順序
吐槽：喊著加班=狼性的公司都是不適合正常人類生存的公司，把周末加班當成鼓吹的事情&評價員工是否有狼性的標準更是扯淡。
相關文章
這篇文章主要介紹了jQuery實現(xiàn)自動滾動到頁面頂端的方法,涉及jQuery針對頁面操作的相關技巧,需要的朋友可以參考下2015-05-05
仿中關村在線首頁彈出式廣告插件(jQuery版) ，需要的朋友可以參考下2012-05-05
這篇文章主要介紹了jQuery實現(xiàn)簡單的Ajax調用功能,結合實例形式分析了jQuery的$.ajax方法與后臺php交互實現(xiàn)ajax調用功能相關操作技巧,需要的朋友可以參考下2019-02-02
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我們來看下具體的使用方法2014-05-05
servlet+jquery實現(xiàn)文件上傳進度條示例代碼
現(xiàn)在文件的上傳，特別是大文件上傳，都需要進度條。這篇文章主要介紹了servlet+jquery實現(xiàn)文件上傳進度條示例代碼，有興趣的可以了解一下。2017-01-01
jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了JQuery中使用ajax傳輸超大數據的解決方法,也就是比較多的數據,超過max_upload_size等設置,本文方法在chrome瀏覽器下測試通過,需要的朋友可以參考下2014-07-07
本文給大家分享的是使用jQuery制作的組件，實現(xiàn)獲取data-自定義屬性，并附上使用方法，非常的實用，有需要的小伙伴可以參考下2015-11-11
之前用javascript做個計數器，從網上搜了搜，找不到合適的，就想著用jquery自己做一個2010-08-08
在jQuery庫中，幾乎所有的插件都被限制在它的命名空間里。全局的對象都很好地存儲在jQuery命名空間里，因此當把jQuery和其它javascript類庫一起使用時，不會引起沖突.2010-06-06