JS HTML：單擊按鈕后獲取特定的列值

Question

我有一張有幾列的桌子。 每行都有一個編輯按鈕。

如果用戶單擊它，則會打開一個模式視圖。 用戶可以輸入一些值，然后通過AJAX將其發送到我的控制器。

我的問題是我不知道如何將用戶實際上在表中單擊的特定編輯按鈕轉移到JS函數。

過去我在每一行中都有一個編輯按鈕：

  <td><a th:href="'/edit/' + *{person.getName()}" class="btn-sm btn-success"
                           role="button">Edit</a></td>

但是，這導致我進入了一個新的HTML視圖，用戶可以在其中進行編輯。 使用我的新UI，我真的只希望使用模式。

但是由於JS / AJAX對整個表格一無所知，所以在我看來，這似乎是完全錯誤的方法。 而且我對JS / AJAX還是很陌生

目前，我這樣調用JS函數：

<button type="button" class="btn btn-primary"
                        id="subscribe-email-form" onclick="updateModal()">Save
                </button>

什么可以解決我的問題？：

如果我可以給updateModal一個參數，它就可以工作，但是由於我通過使用帶有data-target="#myModal"的編輯按鈕調用了id="myModal"的模態視圖，因此無法傳輸任何id。

這是我的JS，我想要的是為字段oldID找到正確的參數

提前非常感謝您！

function updateModal() {
    var newValues = {};
    newValues["newName"] = $("#newName").val();
    newValues["newAge"] = $("#newAge").val();
    newValues["newID"] = $("#newID").val();
    var oldID = "???";

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

以及相關的HTML部分

<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()}" id="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">
                                    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">
                        <br>
                        <input name="referencia" id="newID" type="text"
                               class="form-control"
                               placeholder="Enter new id">
                    </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"
                        id="subscribe-email-form" onclick="updateModal()">Save
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<br>

Answer 1

第一個： id=必須唯一，因此請勿重復使用person1 ， age1 ，下一個1的userID1將為2，依此類推..您也可以使用class=代替id=

第二：如果將其更改為類..在編輯按鈕上單擊，您可以使用

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

然后，您可以將userID傳遞給modal並在saveEdit時再次獲取它

注意：如果您將age userID id="person"更改為class="person"此代碼將起作用

一遍又一遍不要使用相同的id到多個元素 ..刪除按鈕具有重復的id ..因此，您也需要更改它。.在將id="delete"更改為class="delete"您可以采用

$('.delete').on('click' , function(){
   // do ajax things for remove then
   $(this).closest('tr').remove();
});

如果您動態添加行，則需要使用

$(document).on( 'click' , '.delete' , function(){ /* code here */ }); // use same way with dynamically created element events