js

需要实现表格按键上移下移顺序改变

//html
<table class="table table-bordered table-hover table-msg" align="center">
                <thead>
                <tr>
                    <th>缩略图</th>
                    <th style=" 180px;">尺寸</th>
                    <th style=" 300px;">排序</th>
                    <th style=" 160px;">操作</th>
                </tr>
                </thead>
                <tbody>
                @foreach($resource as $index=>$gallery)
                    <tr>
                        <td class="vertical-middle">
                            <img src="{{asset($gallery)}}">
                        </td>
                        <td class="vertical-middle">1920*1080</td>
                        <td class="vertical-middle">
                            {{--<input type="text" value=" {{$index}}" class="sort_input" name="orderNum">--}}
                            <button class="btn btn-primary upMove">上移</button>
                            <button class="btn btn-warning downMove"> 下移</button>
                        </td>
                        <td class="vertical-middle">
                            <button class="btn btn-danger" onclick="delPic('{{$id}}','{{$index}}')">删除</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

//js
  var sorturl = '{{route('change_sort')}}';

//上移
    $(".upMove").bind("click", function () {
        var $this = $(this);
        var curTr = $this.parents("tr");
        var prevTr = $this.parents("tr").prev();
        if (prevTr.length == 0) {
            alert("第一行,不可上移");
            return;
        } else {
            prevTr.before(curTr);
            sortNumber();//重新排序
        }
    });
    //下移
    $(".downMove").bind("click", function () {
        var $this = $(this);
        var curTr = $this.parents("tr");
        var nextTr = $this.parents("tr").next();
        if (nextTr.length == 0) {
            alert("最后一行,不可下移");
            return;
        } else {
            nextTr.after(curTr);
            sortNumber();//重新排序
        }
    });
  //排序方法
    function sortNumber() {
        //   填写顺序调整顺序 
        // var allInput = $("table").find("input[name='orderNum']");
        // if (allInput.length != 0) {
        //     for (var i = 0; i < allInput.length; i++) {
        //         var tempInput = allInput[i];
        //         tempInput.value = i + 1;
        //     }
        // }
        var arr = $('tr td').children('img');
        var resource = [];
        for (var i = 0; i < arr.length; i++) {
            var src = arr[i].currentSrc;
            var res_arr = src.split('/');
            var img = res_arr[res_arr.length - 1];
            resource.push(img); //图片的资源集合

        }
        var banner_resource = resource.join(',');
        setSort(banner_resource);

    }

    function setSort(resource) {
        $.get(sorturl, {'id': banner_id, 'resource': resource}, function (res) {
            if (res.status == 1) {
                //刷新页面
                // window.location.href = window.location.href;
            } else {
                layer.msg('{{trans('admin.MEMO_P13')}}', {
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
            }
        })
    }