使用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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
Vue中使用vux的配置详解
May 05 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现的策略模式示例
2019/03/20 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
动态加载iframe
2006/06/16 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python闭包实现计数器的方法
2015/05/05 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
十一个高级MySql面试题
2014/10/06 面试题
外科实习自我鉴定
2013/10/06 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
课程设计感想范文
2015/08/11 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python