Jquery+bootstrap實現表格行置頂置底上移下移操做

最近接到產品的一個需求,它是要對城市排序,實際操做中咱們要實現表格行置頂置底上移下移操做.

以下圖:

使用這些按鈕,咱們能夠對城市進行上下移動的操做,這些排好序的城市就會在APP上這個順序展現了.

我是怎麼用Jquery+bootstrap進行實現這些功能的呢?往下看就知道了,嘿嘿.

1.html

首先咱們加載好jquery與bootstrap基本的css與js,這個大家本身加載就行了.下面是個人HTML5代碼:

<form class="Form" method="get" autocomplete="off">
    <table class="table table-bordered comTable table1">
        <tr>
            <td colspan="3">
                北京市
                <input type="text" name="city[]" value="11001" hidden>
            </td>
            <td colspan="1">
                <input type="button" value="置頂" name="savedBtn" class="btn btn-primary upBtn top" />
                <input type="button" value="置底" name="savedBtn" class="btn btn-primary upBtn stick" />
                <input type="button" value="上移" name="savedBtn" class="btn btn-primary upBtn up" />
                <input type="button" value="下移" name="savedBtn" class="btn btn-primary upBtn down" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
                江西呀
                <input type="text" name="city[]" value="11002" hidden>
            </td>
            <td colspan="1">
                <input type="button" value="置頂" name="savedBtn" class="btn btn-primary upBtn top" />
                <input type="button" value="置底" name="savedBtn" class="btn btn-primary upBtn stick" />
                <input type="button" value="上移" name="savedBtn" class="btn btn-primary upBtn up" />
                <input type="button" value="下移" name="savedBtn" class="btn btn-primary upBtn down" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
                河南拉
                <input type="text" name="city[]" value="11003" hidden>
            </td>
            <td colspan="1">
                <input type="button" value="置頂" name="savedBtn" class="btn btn-primary upBtn top" />
                <input type="button" value="置底" name="savedBtn" class="btn btn-primary upBtn stick" />
                <input type="button" value="上移" name="savedBtn" class="btn btn-primary upBtn up" />
                <input type="button" value="下移" name="savedBtn" class="btn btn-primary upBtn down" />
            </td>
        </tr>
       

    </table>

    <table class="table table-bordered comTable table2">
        <tr>
            <td align="center" colspan="4">
                <input type="button" value="保存" name="savedBtn" class="btn btn-danger upBtn J_save" />
                <a id="backBtn" class="btn btn-info upBtn" href='' />返回</a>
            </td>
        </tr>
    </table>

</form>

這塊HTML代碼主要是佈局好要操做的頁面元素,上移」，「下移」,「置頂」,"置底"操做元素.

2.JS代碼

$(function(){
        //上移
        var $up = $(".up");
        $up.click(function() {
            var $tr = $(this).parents("tr");
            if ($tr.index() != 0) {
                $tr.fadeOut().fadeIn();
                $tr.prev().before($tr);
            }
        });
        //下移
        var $down = $(".down");
        var len = $down.length;
        $down.click(function() {
            var $tr = $(this).parents("tr");
            if ($tr.index() != len - 1) {
                $tr.fadeOut().fadeIn();
                $tr.next().after($tr);
            }
        });
        //置頂
        var $top = $(".top");
        $top.click(function(){
            var $tr = $(this).parents("tr");
            $tr.fadeOut().fadeIn();
            $(".table1").prepend($tr);
            $tr.css("color","#f60");
        });
        //置底
        var $stick = $(".stick");
        $stick.click(function(){
            var $tr = $(this).parents("tr");
            $tr.fadeOut().fadeIn();
            $(".table1").append($tr);
            $tr.css("color","#f60");
        });

        //保存
        $('.J_save').click(function() {

            var url = "www.faxingshe.net";
            var forms = $("form").serialize();
            $.post(url, forms , function(res) {
                if (res > 0) {
                    antd.message.success('保存成功！');
                    location.href = 'www.faxingshe.net';
                } else {
                    antd.message.error('保存失敗');
                    return false;
                }
            });
        });


    });

其中保存那個方法能夠刪除不用,這是我本身作項目需求裏邊用到的功能.

你們能夠看到這些功能實現基本都是jquery對頁面元素的操做,全部學好jquery是很是nice的哦.之後你也能夠對頁面效果信手捏來了,嘿嘿.