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>

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

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

  • 相关阅读:
    IT战略规划项目方法论(转)
    008_Node中的require和import
    007_Mac上安装Node和NPM
    005_讨论多线程和单线程
    006_饿了么大前端总监sofish帮你理清前端工程师及大前端团队的成长问题!
    005_解密饿了么大前端团队
    005_python对整数的拼接
    010_动态语言与鸭子类型及python2和3的区别
    010_vim和python整合开发
    009_一行python重要工具
  • 原文地址:https://www.cnblogs.com/zhaobolu/p/3699340.html
Copyright © 2011-2022 走看看