使用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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JavaScript类的继承操作实例总结
Dec 20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
百度移动版的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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
使用js画图之饼图
2015/01/12 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python使用gRPC传输协议教程
2018/10/16 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python 生成器需注意的小问题
2020/09/29 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
师说教学反思
2014/02/07 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书