Question

我有以下功能

用户有一个包含条目的表
他可以在编辑按钮上单击每行
打开模态视图
用户输入值
点击保存按钮，这些值加上表中的id将转移到我的控制器
TODO，见下文。

现在我已将所有内容都实现到我的控制器上。

我的AJAX请求从我的Controller获得成功消息后，我想更新表格单元格。

我的函数updateCell应找到该行并使用新值更新它。

由于我无法仅替换每个单元格值，我只想用新内容替换整行。

但如果我执行该功能，实际上没有任何反应。

如果我使用

$("#" + userID).html("test);

有效。

我需要什么。

最好只更新特定的单元格值而不是仅替换整行。但我想知道由于运行时替换整行而不是单元格值没有区别吗？

任何人都可以告诉我如何实现我想要的更换整行或只是替换显示给用户的单元格值？

这是我的JS：

  function updateCell(userID, userName, userAge) {
    $("#" + userID).html("<td text=" + userName + "class=\"username\"></td>\n" +
        "                    <!--/*@thymesVar id=\"getTradableBTC\" type=\"java.lang.Double\"*/-->\n" +
        "                    <td text=" + userAge + " class=\"age\"></td>\n" +
        "                    <!--/*@thymesVar id=\"getTop\" type=\"java.lang.Double\"*/-->\n" +
        "                    <td text=" + userID + " class=\"id\"></td>\n" +
        "\n" +
        "                    <td>\n" +
        "                        <div class=\"btn-toolbar\" role=\"toolbar\">\n" +
        "                            <!-- Button trigger modal -->\n" +
        "                            <div class=\"btn-group mr-2\" role=\"group\" aria-label=\"First group\">\n" +
        "                                <button type=\"button\" class=\"btn btn-outline-primary btn-sm\" data-toggle=\"modal\"\n" +
        "                                        data-target=\"#myModal\" data-th-id=\"${person.getId()}\">\n" +
        "                                    Edit\n" +
        "                                </button>\n" +
        "                            </div>\n" +
        "                            <div class=\"btn-group mr-2\" role=\"group\" aria-label=\"Second group\">\n" +
        "                                <button type=\"button\" class=\"btn btn-outline-danger btn-sm\" id=\"delete\">Delete\n" +
        "                                </button>\n" +
        "                            </div>\n" +
        "                        </div>\n" +
        "                    </td>");
}

这是我的HTML：

<div class="container">
    <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 th:id="${person.getId()}" th:each="person : ${elementList}">

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

Answer 1

你在控制台出错吗？您的函数将userName作为参数，但您在字符串concat中使用username。

通过Jquery更新表的单元格不起作用

1 个答案: