表格行变换顺序功能(jquery)
周末写了个更改表格行顺序的小功能,直接贴代码
表格部分如下:
<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>
更改后可以按照每行的唯一标记提交新的顺序
吐槽:喊着加班=狼性的公司都是不适合正常人类生存的公司,把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。
表格行变换顺序功能(jquery)的更多相关文章
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- jquery完成带单选按钮的表格行高亮显示
jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- 通过jQuery实时监听表格行数变化
[本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...
- JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)
1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...
- jquery 表格行计算
表格行计算 总金额: function jisuanTrJinE(obj){ var curTab = $(obj).closest("table"); var curTr = $ ...
随机推荐
- 机器人api(图灵机器人)
图灵机器人,是基于自然语言解析的智能机器人,已经免费开放了机器人api接口,有需求的同学能够去试试. 图灵机器人官网:http://www.tuling123.com 图灵机器人体验:http://w ...
- linux-多线程
一.什么是线程? 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立执行的基本单位.线程自己基本上不拥有系统资源,仅仅拥有一点在执行中不可缺少的资源(如程序计数器,一组寄存器和 ...
- jQuery 编辑div内容
div显示如下 <div id="showResult"></div> div中添加的html,进行拼接 $("#showResult" ...
- 【Servlet】Servlet应用的get、post访问及和JSP的配合使用
Servlet是一种服务器端的Java应用程序,具有独立于平台和协议的特性,可以生成动态的Web页面. 它担当客户请求(Web浏览器或其他HTTP客户程序)与服务器响应(HTTP服务器上的数据库或应用 ...
- IOS--- NavigationBar标题按钮
A.NavigationBar标题按钮 1.需求 在“首页”的导航栏中部设置一个“首页”文字+箭头按钮 统一设置样式 根据实际文本长度调整宽度 消除系统自带的点击高亮效果 点击按钮,箭头上下颠倒 gi ...
- 《app研发录》第一章 重构,夜未眠笔记
1.1 重新规划android的项目结构 重新规划android的目录结构分两步: 1.建立AndroidLib类库,将与业务无关的逻辑转移到AndroidLib. acitivity存放的是 ...
- JMS—事务管理
Spring提供了一个JmsTransactionManager用于对JMS ConnectionFactory做事务管理.这将允许JMS应用利用Spring的事务管理特性.JmsTransactio ...
- C#迭代语句
1,do while语句 do语句重复执行语句或者语句块,直到指定的表达式为false为止.循环体如果为单个语句,可以不放在{}内,如果不是,那么必须放在{}内.如下面的代码 Codeint i=0; ...
- CSS3 动画效果合集
@charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * License ...
- 那天有个小孩跟我说LINQ(四)转载
1 LINQ TO SQL(代码下载) 我们以一个酒店管理系统的数据库为例子 表结构很简单:GuestInfo(客人信息表),Room(房间表),RoomType(房间类 ...