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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
图解javascript作用域链
May 27 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
pandas重新生成索引的方法
2018/11/06 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
机修工工作职责
2014/02/21 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
岗位明星事迹材料
2014/05/18 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
病危通知书样本
2015/04/17 职场文书
经营场所证明范本
2015/06/19 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python