使用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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
p5.js绘制创意自画像
Nov 04 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 curl模拟post请求小实例
2013/11/13 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
JSONP跨域请求
2017/03/02 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python魔术方法详解
2015/02/14 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
init进程的作用
2012/04/12 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
创卫工作总结2015
2015/04/22 职场文书
入党团支部推荐意见
2015/06/02 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python