使用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 相关文章推荐
json 定义
Jun 10 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP类的反射用法实例
2014/11/03 PHP
php计算年龄精准到年月日
2015/11/17 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
详解JS数值Number类型
2018/02/07 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
Python实现注册登录系统
2017/08/08 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
校园环保建议书
2014/05/14 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫