使用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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php对象工厂类完整示例
2018/08/09 PHP
php解决安全问题的方法实例
2019/09/19 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
python获取本机外网ip的方法
2015/04/15 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
分析Python中解析构建数据知识
2018/01/20 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
pycharm创建一个python包方法图解
2019/04/10 Python
django 单表操作实例详解
2019/07/30 Python
python中time、datetime模块的使用
2020/12/14 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
什么是Remote Module
2016/06/10 面试题
教师实习自我鉴定
2013/12/13 职场文书
迎接领导欢迎词
2014/01/11 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
廉洁校园实施方案
2014/05/25 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
房产公证书格式
2015/01/26 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis