时间戳

首页 > 解决方案 > 更改表格中一行的位置

jquery - 更改表格中一行的位置

问题描述

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

});

你会帮我吗？

标签： jqueryspring-bootthymeleaf

解决方案

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

$(".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 中更改现有表中的表行值？

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

推荐阅读