使用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学习笔记之Helloworld
Dec 22 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
百度移动版的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 保留字列表
2012/10/04 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
限制文本字节数js代码
2007/03/06 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
数控专业个人求职信范例
2013/11/29 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
合作意向书
2014/07/30 职场文书
安全生产工作汇报
2014/10/28 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
Python基础知识之变量的详解
2021/04/14 Python
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
mysql如何能有效防止删库跑路
2021/10/05 MySQL
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫