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 相关文章推荐
js获取class的所有元素
Mar 28 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 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
PHP5 面向对象程序设计
2008/02/13 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python 全文检索引擎详解
2017/04/25 Python
使用Python来开发微信功能
2018/06/13 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
大学生怎样写好自荐信
2014/02/25 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
真诚的求职信
2014/07/04 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
抗洪救灾标语
2014/10/08 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers