使用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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
js+canvas绘制图形验证码
Sep 21 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
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
费用会计岗位职责
2014/01/01 职场文书
初三家长会邀请函
2014/01/18 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
浅析Python中的套接字编程
2021/06/22 Python
德劲DE1105机评
2022/04/05 无线电