jquery实现更改表格行顺序示例
2014-04-30 00:00
701 查看
表格部分如下:
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实现更改表格行顺序示例
- Vue+jquery实现表格指定列的文字收缩的示例代码
- 用jQuery实现 表格数据上下交换顺序
- 使用jquery写个更改表格行顺序的小功能
- jQuery实现的调整表格行tr上下顺序
- jquery更改表格行顺序实例
- jQuery实现的调整表格行tr上下顺序
- jQuery实现的表格前端排序功能示例
- 使用jquery写个更改表格行顺序的小功能
- jQuery实现table表格信息的展开和缩小功能示例
- jQuery实现表格文本框淡入更改值后淡出效果
- JQuery实现表格中相同单元格合并示例代码
- jQuery实现的简单动态添加、删除表格功能示例
- jQuery实现调整表格单列顺序完整实例
- JQuery实现表格中相同单元格合并示例代码
- jQuery+ajax实现动态添加表格tr td功能示例
- jQuery通过点击行来删除HTML表格行的实现示例
- jQuery+CSS实现的table表格行列转置功能示例
- jQuery通过点击行来删除HTML表格行的实现示例
- jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例