周末写了个更改表格行顺序的小功能,直接贴代码

表格部分如下:

<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)的更多相关文章

  1. jquery更改表格行顺序实例

    使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...

  2. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  3. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  4. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  5. jquery完成带单选按钮的表格行高亮显示

    jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...

  6. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  7. 通过jQuery实时监听表格行数变化

    [本文出自天外归云的博客园] 使用bootstrap table组件,当使用过滤器的时候,页面的表格行数发生变化,此时需要统计表格行数.想要监听表格变化,如何做呢? 使用场景:有一个表格里放着许多测试 ...

  8. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  9. jquery 表格行计算

    表格行计算 总金额: function jisuanTrJinE(obj){ var curTab = $(obj).closest("table"); var curTr = $ ...

随机推荐

  1. javascript中bind,apply,call的相同和不同之处

    javasctipt中bind,apply,call的相同点是: 1,都是用来改变this的指向; 2,都可以通过后续参数进行传参; 3,第一个参数都是指定this要指向的对象; 不同点: 1,调用方 ...

  2. AngularJS开发下一代Web应用笔记(一)

    一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真 ...

  3. Hyper-V介绍

    Hyer-v主机是高端虚拟主机用户的最佳选择.您不再受其他用户程序对您造成的影响,您将得到的是更加公平的资源分配,远远低于虚拟主机的故障率.Hyper-V的分区包含两种:父分区和客户分区.Hyper- ...

  4. Vim 快捷键整理

    一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ctrl + f,向上翻页ctrl + b 3.向下翻半页ctrl + d,向上翻半页ctrl + u 4.移动到行尾$,移动到行首0(数 ...

  5. How does CCFileUTils::fullPathForFilename work

    OverView The purpose of this document is show you how does function CCFileUtils::fullPathForFilename ...

  6. Android开发的第一天

    不管做什么开发都是有开始的,对于开发的话开始要的准备的就是开发工具了  安装开发工具配置开发工具好了不多说了现在我来说怎么样安装和配置安卓的开发工具吧 第一首先就是要下载一个JDK (Java SE ...

  7. ASP.net导出EXCEL乱码?试试这个

    网上的方法有说加meta的,是有用,不过,不够直接, 甭管你asp文件是utf-8还是gb2312,加入下面两句就搞掂: response.Charset="GB2312" ses ...

  8. iOS——GCD多线程

    1> 概述 Grand Central Dispatch (GCD)是Apple开发的一种多核编程技术.主要用于优化应用程序以支持多核处理器以及其他对称多处理系统. GCD提供函数实现多线程开发 ...

  9. javascript进击(三)简介

    JavaScript 表单验证(可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证) 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输 ...

  10. linux部署tomcat

    安装说明 安装环境:CentOS-6.5安装方式:源码安装 软件:apache-tomcat-6.0.45.tar.gz下载地址:http://tomcat.apache.org/download-6 ...