使用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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
ES6的新特性概览
Mar 10 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
babel基本使用详解
Feb 17 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python读大数据txt
2016/03/28 Python
详解python中的json的基本使用方法
2016/12/21 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
导游词之青城山景区
2019/09/27 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫