使用jquery寫個更改表格行順序的小功能_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>

更改後可以按照每行的唯一標記提交新的順序

吐槽：喊著加班=狼性的公司都是不適合正常人類生存的公司，把周末加班當成鼓吹的事情&評價員工是否有狼性的標準更是扯淡。