jQuery 元素的選中， 置頂、上移、下移、置底、刪除

如截圖：

 

  

<ul>
    <li class="li01" onclick="C_columnSetTop(this)"><i></i>置頂</li>
    <li class="li02" onclick="C_columnSetMoveUp(this)"><i></i>上移</li>
    <li class="li03" onclick="C_columnSetMoveDown(this)"><i></i>下移</li>
    <li class="li04" onclick="C_columnSetBottom(this)"><i></i>置底</li>
    <li class="li05"><i></i>刷新</li>
    <li class="li06" onclick="C_columnSetDel(this)"><i></i>刪除</li>
</ul>
<table>
    <thead>
    <tr>
        <th>列名</th>
        <th>是否顯示</th>
    </tr>
    </thead>
    <tbody class="M_scrollBar">
    <tr>
        <td>客戶狀態1</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態2</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態3</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態4</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態5</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
        <td>客戶狀態</td>
        <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    </tbody>
</table>
<script>
    //居中彈框（列設置）刪除
    function C_columnSetDel(o){
        var obj = $(o).parent().next('table').find("tbody tr.P_current");
        if(obj.length > 0){
            obj.hide();
        }else {
            win.alert('系統提示', '請選擇要【刪除】的列！');
        }
    }

    //居中彈框（列設置）置底
    function C_columnSetBottom(o){
        var obj = $(o).parent().next('table').find("tbody tr.P_current");
        var list = $(o).parent().next('table').find("tbody tr");
        if(obj.length > 0){
            var thisLocation = list.index( obj );
            if( thisLocation >= list.length - 1 ){
                win.alert('系統提示', '已移到最底端了！');
            }else {
                //console.log (thisLocation);
                obj.parent().append(obj);   //移動到最底
            }
            //console.log (list.length);
        }else {
            win.alert('系統提示', '請選擇要【置底】的列！');
        }
    }
    //居中彈框（列設置）下移動
    function C_columnSetMoveDown(o){
        var obj = $(o).parent().next('table').find("tbody tr.P_current");
        var list = $(o).parent().next('table').find("tbody tr");
        if(obj.length > 0){
            var thisLocation = list.index( obj );
            if( thisLocation >= list.length - 1 ){
                win.alert('系統提示', '已移到最底端了！');
            }else {
                //console.log (thisLocation);
                obj.next().after(obj); //下移動
            }
            //console.log (list.length);
        }else {
            win.alert('系統提示', '請選擇要【下移】的列！');
        }
    }

    //居中彈框（列設置）置頂
    function C_columnSetTop(o){
        var obj = $(o).parent().next('table').find("tbody tr.P_current");
        var list = $(o).parent().next('table').find("tbody tr");
        if(obj.length > 0){
            var thisLocation = list.index( obj );
            if( thisLocation < 1 ){
                win.alert('系統提示', '已移到最頂端了！');
            }else {
                console.log (thisLocation);
                obj.parent().prepend(obj);  //移動到最頂
            }
        }else {
            win.alert('系統提示', '請選擇要【置頂】的列！');
        }
    }
    //居中彈框（列設置）上移動
    function C_columnSetMoveUp(o){
        var obj = $(o).parent().next('table').find("tbody tr.P_current");
        var list = $(o).parent().next('table').find("tbody tr");
        if(obj.length > 0){
            var thisLocation = list.index( obj );
            if( thisLocation < 1 ){
                win.alert('系統提示', '已移到最頂端了！');
            }else {
                //console.log (thisLocation);
                obj.prev().before(obj); //上移動
            }
            //console.log (list.length);
        }else {
            win.alert('系統提示', '請選擇要【上移】的列！');
        }
    }

/*客戶，列設置*/
$(function(){
    $("#C_columnSetList table tbody tr").on('click', function() {
        if($(this).hasClass("P_current")){
            $(this).removeClass("P_current");
        }else {
            $(this).addClass("P_current").siblings().removeClass("P_current");
        }
    });
});

</script>