码迷,mamicode.com
首页 > Web开发 > 详细

表格行变换顺序功能(jquery)

时间:2014-04-30 13:29:48      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:com   http   blog   style   class   div   img   code   java   log   javascript   

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

表格部分如下:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

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

bubuko.com,布布扣
<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>
bubuko.com,布布扣

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

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

表格行变换顺序功能(jquery),布布扣,bubuko.com

表格行变换顺序功能(jquery)

标签:com   http   blog   style   class   div   img   code   java   log   javascript   

原文地址:http://www.cnblogs.com/zhaobolu/p/3699340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!