使用jquery写个更改表格行顺序的小功能


Posted in Javascript onApril 29, 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 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JS定义类的六种方式详解
May 12 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
百度移动版的url编码解码示例
Apr 29 #Javascript
通过url查找a元素应用案例
Apr 29 #Javascript
jquery实现的图片点击滚动效果
Apr 29 #Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 #Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 #Javascript
jquery form 隐藏的input 选择
Apr 29 #Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python实现数组插入新元素的方法
2015/05/22 Python
python实现小球弹跳效果
2019/05/10 Python
python操作文件的参数整理
2019/06/11 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python实现简单的五子棋游戏
2020/09/01 Python
Servlet方面面试题
2016/09/28 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
教师专业自荐书范文
2014/02/10 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
企业文化标语大全
2014/06/10 职场文书
个人委托书如何写
2014/09/25 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
自主招生自荐信格式
2015/03/04 职场文书
通知怎么写?
2019/04/17 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技