JQuery實現Table的tr上移下移功能

本文實例為大傢分享瞭JQuery實現Table的tr上移下移的具體代碼,供大傢參考,具體內容如下

今日份需求:實現表格行的上移下移,並更新排序值,效果如下:

話不多說直接上代碼,JQ實現挺簡單的

HTML代碼

<div>
           <span>
               <button class="layui-btn" id="doUp">上移</button><button class="layui-btn" id="doDown">下移</button>
            </span>
        </div>
        <table class="layui-table" style="width: 800px; margin-top: 3px;">
            <thead>
                <tr>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">姓名</th>
                    <th style="width: 100px; padding: 0px 0px; height: 32px;">聯系電話</th>
                    <th style="width: 20px; padding: 0px 0px; height: 32px;">排序值</th>
                </tr>
            </thead>
            <tbody id="demo">
                <tr>
                    <td>張三</td>
                    <td>139000000</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>137000000</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>139000000</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>趙六</td>
                    <td>139000000</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>孫七</td>
                    <td>139000000</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>周八</td>
                    <td>139000000</td>
                    <td>6</td>
                </tr>
            </tbody>
</table>

JQ代碼

<script>
    $(function () {
        //添加點選中行樣式方便查看效果
        $("#demo tr").click(function () {
            if (!$(this).hasClass("selected")) {
                $("#demo tr.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        });
        //上移
        $("#doUp").click(function () {
            Up();
        });
        //下移
        $("#doDown").click(function () {
            Down();
        });
    });
    //上移
    function Up() {
        var currentOrderno;//當前排序值
        var tempOrderno;//臨時值
        var current = $("#demo tr.selected");//獲取當前行
        currentOrderno = current.find('td:eq(2)').text();
        var prev = current.prev();//當前tr的前一個元素
        if (current.index() > 0) {//大於0表示簽名還有行,沒有到頂
            //下面調換兩行的排序值,類似冒泡排序
            tempOrderno = prev.find('td:eq(2)').text();
            prev.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把選中行插入到上一行的前面
            current.insertBefore(prev);
        }
    }
    //下移
    function Down() {
        var currentOrderno;
        var tempOrderno;
        var current = $("#demo tr.selected");
        currentOrderno = current.find('td:eq(2)').text();
        var next = current.next();//當前tr的下一個元素
        if (next.length > 0) {//大於0表示後面還有行,沒有到底
            tempOrderno = next.find('td:eq(2)').text();
            next.find('td:eq(2)').text(currentOrderno);
            current.find('td:eq(2)').text(tempOrderno);
            //把選中行插入到下一行的後面
            current.insertAfter(next);
        }
    }
</script>

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: