您的位置：首页 > Web前端 > JQuery

使用jquery写个更改表格行顺序的小功能

2018-10-12 14:10 344 查看

周末写了个更改表格行顺序的小功能，直接贴代码

表格部分如下：


<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>

更改后可以按照每行的唯一标记提交新的顺序

吐槽：喊着加班=狼性的公司都是不适合正常人类生存的公司，把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航