表行変換順序機能(jquery)

8535 ワード

週末に表の行の順序を変更する小さい機能を書いて、直接コードを貼ります
表のセクションは次のとおりです.
<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>

変更後、各行の一意のタグに従って新しい順序をコミットできます.
ツッコミ:残業を叫ぶ=オオカミ性の会社は普通の人間の生存に適さない会社であり、週末の残業を吹聴すること&従業員にオオカミ性があるかどうかを評価する基準はさらに薄っぺらだ.