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

表格部分如下:

  1. <table class="table" id="test_table">
  2. <thead>
  3. <tr>
  4. <th>时间</th>
  5. <th>详情</th>
  6. <th>操作</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line">
  11. <td>
  12. 2014-04-29 11:02:24
  13. </td>
  14. <td>
  15. 详情
  16. </td>
  17. <td>
  18. <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span>
  19. <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span>
  20. </td>
  21. </tr>
  22. <tr cid="7.0.0-2014-04-29_11-02-24_915" class="list_line">
  23. <td>
  24. 2014-04-28 10:00:00
  25. </td>
  26. <td>
  27. 详情
  28. </td>
  29. <td>
  30. <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span>
  31. <span class="move_btn glyphicon glyphicon-arrow-down" move_act="down"></span>
  32. </td>
  33. </tr>
  34. </tbody>
  35. </table>

js代码,其中会为要变更的行在变更顺序后加上class=danger

  1. <script type="text/javascript">
  2. $(function(){
  3. $('.move_btn').click(function(){
  4. var move_act = $(this).attr('move_act');
  5. $('#test_table tbody tr').removeClass('danger');
  6.  
  7. if(move_act == 'up'){
  8. $(this).parent().parent('tr').addClass('danger')
  9. .prev().before($(this).parent().parent('tr'));
  10. }
  11. else if(move_act == 'down'){
  12. $(this).parent().parent('tr').addClass('danger')
  13. .next().after($(this).parent().parent('tr'));
  14. }
  15. setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000);
  16. });
  17. });
  18. </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. 用NGUI做一个计时条!

    1.建立两个UISprite. 2.建立脚本CountingTime 3.编写脚本 public class CountTime : MonoBehaviour { //时间计时器 public fl ...

  2. eclipse项目出现红色叉叉解决方案

    方法一:导入的文件被删除了.解决方法:右击项目名,在弹出的菜单中选择“Bulid Path”-->“configure build path”-->“Source”,找到已被删除的那个文件 ...

  3. APP下载页面(支持微信扫一扫)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. Struts2学习笔记1

     一.下载struts2.0.1 http://struts.apache.org/downloads.html,下载struts-2.0.1-all.zip,这个压缩包中包括了开发struts2所需 ...

  5. Splay Tree的删除操作

    Splay Tree的插入操作,搜索操作,和删除操作都实现了,那么就能够使用来解题了. 指针的删除操作的处理还是那么难的,非常多坎须要避开. 同一个坎还是坑了我好多次,就是指针传递的问题,什么时候须要 ...

  6. C++实现建立和一二进制树的三个递归遍历

    说明:这篇文章是学习交流,转载请注明出处,欢迎转载! 二叉树是一种常见的数据结构.二叉树的遍历也是家常便饭的事了,这里仅仅写出一个完整的能够执行的C++代码来随便建立一个例如以下图所看到的的二叉树,建 ...

  7. web app 相关记录

    今天在手机浏览器上运行cocos2d-html5的sample, crystalcraze运行起来只有10~20帧, moonwarrior只有20~30帧,很不理想的数据: 记录下几个web app ...

  8. Memcached启动、关闭参数(摘录)

    启动参数注释如下: -p <num>  指定服务TCP端口,默认为11211 -U <num>   指定服务UDP端口  默认11211表示打开,设置0表示关闭 -s < ...

  9. su: cannot set user id: Resource temporarily unavailable

    今天R&D所在主机出现su: cannot set user id: Resource temporarily unavailable资源不可用报错,直接通过其他机器ssh huyuh@xxx ...

  10. skynet启动过程_bootstrap

    这遍摘自skynet 的wiki skynet 由一个或多个进程构成,每个进程被称为一个 skynet 节点.本文描述了 skynet 节点的启动流程. skynet 节点通过运行 skynet 主程 ...