更改表格中一行的位置

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>

JQuery:

$(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);
        }

    });

链接到主题 How to change the table row value in existing table in jquery?

事实上我仍然需要将它更新到基础，但不是现在