使用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可访问其它域名的cookie的方法
Sep 18 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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之第十天
2006/10/09 PHP
php桌面中心(一) 创建数据库
2007/03/11 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
django 消息框架 message使用详解
2019/07/22 Python
python pycharm的安装及其使用
2019/10/11 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
优秀党支部事迹材料
2014/01/14 职场文书
管理专员自荐信
2014/01/26 职场文书
家长评语和期望
2014/02/10 职场文书
《分一分》教学反思
2014/04/13 职场文书
股东合作协议书范本
2014/04/14 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
使用python创建股票的时间序列可视化分析
2022/03/03 Python