更改表中一行的位置

Question

我在 Spring Boot、Thymeleaf 和/或 JQuery 领域有一个问题我的问题是如何通过将表中的行同时更新到数据库来移动它。 例如，我有一个有 10 行的表，我想将第 6 行的位置更改为第 2 行，同时将第 2-5 行向下移动。 同样，当该行被删除时，它被重新计算。 你会帮我吗？

这是我的表：

<table class="table table-hover"  id="sample_table">
                <thead>
                    <tr>
                        <th>Imię</th>
                        <th>Nazwisko</th>
                        <th>Pieczątka</th>
                        <th>Brygada</th>
                        <th>Status</th>
                        <th>Akcje</th>
                    </tr>
                </thead>
                <tbody>
                <!--/*@thymesVar id="content" type="java.util.List<com.sub.model.Worker"*/-->
                    <tr th:id="${worker.idW}"  th:each="worker,iterStat : ${data}"   >
                        <td th:text="${worker.workerFirstName}"></td>
                        <td th:text="${worker.workerSurname}"></td>
                        <td th:text="${worker.stamp}"></td>
                        <td th:text="${worker.shiftName}"></td>
                        <td th:text="${worker.statusWorker}"></td>
                        <td><a class="btn btn-danger delBtn" th:href="@{deleteW/(id=${worker.idW})}">Usun</a></td>
                        <td><a class="btn btn-primary eBtn" th:href="@{findOneW/(id=${worker.idW})}">Edytuj</a></td>
                    </tr>
                </tbody>
            </table>

查询：

$(document).ready(function () {
    $(' .nBtn, .table .eBtn').on('click', function (event) {
        event.preventDefault();
        var href = $(this).attr('href');
        var text = $(this).text();
        if (text == 'Edytuj') {
            let now = moment();
            $.get(href, function (worker, status) {
                $(".myForm #myFormLabel").empty();
                $(".myForm #myFormLabel").append("Edycja pracowników");
                $('.myForm #idW').val(worker.idW);
                $('.myForm #workerFirstName').val(worker.workerFirstName);
                $('.myForm #workerName').val(worker.workerSurname);
                $('.myForm #workerSurname').val(worker.workerSurname);
                $('.myForm #stamp').val(worker.stamp);
                $('.myForm #shiftName').val(worker.shiftName);
                $('.myForm #statusWorker').val(worker.statusWorker.toString());
                $('.myForm #actual').val(now.format("YYYY-MM-DD HH:mm:ss"));
            });

        } else {
            let now = moment();
             $(".myForm #myFormLabel").empty();
             $(".myForm #myFormLabel").append("Dodawanie pracownika");
             $('.myForm #idW').val('');
             $('.myForm #workerFirstName').val('');
             $('.myForm #workerName').val('');
             $('.myForm #workerSurname').val('');
             $('.myForm #stamp').val('');
             $('.myForm #shiftName').val('');
             $('.myForm #statusWorker').val("");
             $('.myForm #actual').val(now.format("YYYY-MM-DD HH:mm:ss"));
        }
        $('.myForm #exampleModal').modal();
    });Jquery
    ///DELETE MODAL
    $('.table .delBtn').on('click', function (event) {
        event.preventDefault();
        var href = $(this).attr('href');
        $('#myModal #delRef').attr('href', href);
        $('#myModal').modal();
    });

});

你会帮我吗？

Answer 1

回答你的问题，但是，我在我的另一篇文章中找到了，这正是我问我的。

$(".table .btnUp, .table .btnDown").click(function () {
        var $element = this;
        var row = $($element).parents("tr:first");
        if($(this).is('.btnUp')){
            var preTr = row.prev();
            var prevSN = preTr.find('td:eq(0)').html();
            row.find('td:eq(0)').html(prevSN);
            preTr .find('td:eq(0)').html(Number(prevSN)+1);
            preTr .before(row);
        }
        else{
            var nextTr = row.next();
            var nextSN = nextTr .find('td:eq(0)').html();
            row.find('td:eq(0)').html(nextSN );
            nextTr .find('td:eq(0)').html(Number(nextSN)-1);
            nextTr .after(row);
        }

    });

链接到主题如何更改 jquery 中现有表中的表行值？

我仍然必须将其更新到基础的事实，但不是现在