zoukankan      html  css  js  c++  java
  • 表格行变换顺序功能(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>

    更改后可以按照每行的唯一标记提交新的顺序

    吐槽:喊着加班=狼性的公司都是不适合正常人类生存的公司,把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。

  • 相关阅读:
    special word count
    Regular Expression
    position 之 fixed vs sticky
    查看linux并发连接数的方法
    Linux/Unix环境下的make命令详解(转)
    Redis数据结构(转)
    maven中依懒scope说明
    mysql主从复制
    linux查看是否已经安装某个软件
    在mac下使用py2app打包python项目
  • 原文地址:https://www.cnblogs.com/zhaobolu/p/3699340.html
Copyright © 2011-2022 走看看