JQuery实现Table的tr上移下移功能
作者:林深时见禄
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
