jquery实现更改表格行顺序示例


Posted in Javascript onApril 30, 2014

表格部分如下:

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

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

Javascript 相关文章推荐
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
移动节点的jquery代码
Jan 13 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
详解Webpack多环境代码打包的方法
Aug 03 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
vue实现井字棋游戏
Sep 29 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
使用原生js写的一个简单slider
Apr 29 #Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 #Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 #Javascript
百度移动版的url编码解码示例
Apr 29 #Javascript
通过url查找a元素应用案例
Apr 29 #Javascript
jquery实现的图片点击滚动效果
Apr 29 #Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 #Javascript
You might like
php中定时计划任务的实现原理
2013/01/08 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Angular+Node生成随机数的方法
2017/06/16 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python字典序问题实例
2014/09/26 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
留学顾问岗位职责
2014/04/14 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
微信搭讪开场白
2015/05/28 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python