使用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下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
webpack4.0 入门实践教程
Oct 08 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
对python中return和print的一些理解
2017/08/18 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
大学生求职自我评价
2014/01/16 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
文明班集体申报材料
2014/05/23 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2019思想汇报范文
2019/05/21 职场文书