周末写了个更改表格行顺序的小功能,直接贴代码
表格部分如下:
<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),布布扣,bubuko.com
原文:http://www.cnblogs.com/zhaobolu/p/3699340.html