javascript - HTML JS/JQuery:单击按钮后存储参数以将其用于以后的功能

从过去的两天开始，我为实现一种简单的方法而感到困惑，该方法允许用户执行以下步骤：


用户有一个带有条目的表
他可以按行单击编辑按钮
模态视图打开
用户输入值
单击保存按钮后，这些值加上表中的ID将会传输到我的控制器


到目前为止，我已经实现了：

我可以在用户单击“编辑”之后且在模式窗口打开之前，通过以下任一方式过滤掉单击的条目：

$(this).closest('tr').find('.userID').text()

要么

$(button.relatedTarget).attr('id')

但是我无法将必要的用户ID移交给我的updateModal（）JS函数。我需要Spring MVC控制器的ID。

当我尝试在updateUser（）函数中获取这些参数时，它们消失了。因此，在用户单击编辑按钮和显示模式之间，我丢失了这些信息。它们仅在单击编辑按钮后立即可用，但以后不再可用。

我需要的是一种方法，可以在打开模式视图后使这些参数可用，并且当用户单击“发送”时，可以将userID发送给控制器。

我找到了这个选项：

localStorage.setItem('key', 'value');

但这对我没有帮助，因为我的updateUser函数不知道该模式正在使用的ID。

这是我的JS：

function updateUser() {
    alert("try getting parameter");
    alert($(this).closest('tr').find('.userID').text()); //not working HELP pls
    alert($(button.relatedTarget).attr('id')); //not working too
    alert("success?");
    var newValues = {};
    newValues["newName"] = $("#newName").val();
    newValues["newAge"] = $("#newAge").val();
    var userID = "???";

    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/api/edit/" + userID,
        data: JSON.stringify(newValues),
        dataType: 'json',
        timeout: 100000,
        success: function (data) {
            console.log("SUCCESS: ", data);
            display("SUCCESS");
            resultObj = data.result;
        },
        error: function (e) {
            console.log("ERROR: ", e);
            display("ERROR");
            //display(2);
        },
        done: function (e) {
            console.log("DONE");
            display("DONE");
            enableSearchButton(true);
        }
    });
}

这是我的HTML：

<!--- start table -->
<div class="container">
    <br>
    <h3>Overview</h3>
    <br>

    <div class="container" id="modal-submit">
        <div class="col-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">ID</th>
                </tr>
                </thead>
                <tbody>
                <!--/*@thymesVar id="productList" type="java.util.List"*/-->
                <tr id="person" th:each="person : ${elementList}">

                    <td th:text="${person.getName()}" id="username"></td>
                    <!--/*@thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
                    <td th:text="${person.getAge()}" th:id="${person.getName()+person.getAge()}" id="age"></td>
                    <!--/*@thymesVar id="getTop" type="java.lang.Double"*/-->
                    <td th:text="${person.getId()} " th:id="${person.getName()+person.getId()}" class="userID"></td>

                    <td>
                        <div class="btn-toolbar" role="toolbar">
                            <!-- Button trigger modal -->
                            <div class="btn-group mr-2" role="group" aria-label="First group">
                                <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                        data-target="#myModal" data-th-id="${person.getId()}">
                                    Edit
                                </button>
                            </div>
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <button class="btn btn-primary" type="button" id="addElement">Add Element</button>
        <button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
    </div>
</div>
<br>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change data</h5>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="modal-body">
                        <input name="referencia" id="newName" type="text"
                               class="form-control"
                               placeholder="Enter new name">
                        <br>
                        <input name="referencia" id="newAge" type="text"
                               class="form-control"
                               placeholder="Enter new age">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light"
                        data-dismiss="modal">Discard
                </button>
                <button type="button" class="btn btn-primary"
                        onclick="updateUser()">Save
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

最佳答案

解决您的问题的一种可能方法是


当用户点击表格行时，获取相应行的用户ID，即$(this).closest('tr').find('.userID').text()
存储您在上面检索到的用户ID以对DOM建模

var userId = $(this).closest('tr').find('.userID').text();
$("#myModal").data('currentUserId', userId);

在updateUser中，从DOM获取用户ID。

var userId = $("#myModal").data('currentUserId');

基本上，您需要将UserID存储在全局上下文中，在该上下文中，当updateUser和表行单击都将在不同上下文中被调用时，您可以访问该ID。

此外，我认为您需要阅读https://stackoverflow.com/a/3127440/2509344来了解this在JavaScript中的工作方式。

关于javascript - HTML JS/JQuery:单击按钮后存储参数以将其用于以后的功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49522315/