使用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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
PHP守护进程实例
Mar 06 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 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实现将GB编码转换为UTF8
2006/11/25 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python多线程下载文件的方法
2015/07/10 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
化工机械应届生求职信
2013/11/04 职场文书
安全生产检查通报
2014/01/29 职场文书
热门专业求职信
2014/05/24 职场文书
人事专员岗位说明书
2014/07/29 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
大班上学期个人总结
2015/02/13 职场文书
教师节主题班会教案
2015/08/17 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
新手入门Mysql--概念
2021/06/18 MySQL
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android