表格行变换顺序功能(jquery)
2014-04-29 15:35
211 查看
周末写了个更改表格行顺序的小功能,直接贴代码
表格部分如下:
js代码,其中会为要变更的行在变更顺序后加上class=danger
更改后可以按照每行的唯一标记提交新的顺序
吐槽:喊着加班=狼性的公司都是不适合正常人类生存的公司,把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。
表格部分如下:
<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写个更改表格行顺序的小功能
- 使用jquery写个更改表格行顺序的小功能
- jQuery实现的简单动态添加、删除表格功能示例
- jquery实现更改表格行顺序示例
- jQuery实现仿Excel表格编辑功能 - Handsontable
- jquery表格插件DataTables 合计功能(当前页)
- jquery实现表格中点击相应行变色功能效果【实例代码】
- jQuery实现的表格前端排序功能示例
- jquery实现表格的搜索功能
- JQuery表格筛选功能
- jQuery hover事件 使用jquery实现表格的隔行换色功能
- jQuery动态生成表格及右键菜单功能示例
- jQuery实现表格与ckeckbox的全选与单选功能
- jQuery+CSS实现的table表格行列转置功能示例
- jquery实现的类似excel功能的表格----------请高手优化指点
- 基于jquery实现表格内容筛选功能实例解析
- Jquery实现表格元素的动态创建功能
- jQuery实现表格元素动态创建功能
- jQuery实现table表格信息的展开和缩小功能示例
- jquery更改表格行顺序实例