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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js的touch事件的实际引用
Oct 13 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
使用原生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
使用Apache的rewrite技术
2006/06/22 PHP
一个ftp类(ini.php)
2006/10/09 PHP
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Python struct.unpack
2008/09/06 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
用python读取xlsx文件
2020/12/17 Python
PHP面试题附答案
2015/11/28 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
爱情保证书范文
2014/02/01 职场文书
高中军训感言200字
2014/02/23 职场文书
社区居务公开实施方案
2014/03/27 职场文书
战友聚会主持词
2014/04/02 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书