javascript - Thymeleaf + jQuery，如何正确添加 th :field ="*{value}"

Question

我正在努力解决一个问题。我正在尝试向我的表单动态添加行。我的第一行(静态)表格工作正常，但是当我添加另一行时，正在添加表格但我无法获得任何值，就像它会保持空白一样。请帮忙

好的，这是我的表格:

<h2>Risk management</h2>
    <table class="table table-striped" id="myTable">
        <tr>
            <th>Type of work</th>
            <th>Type of threat</th>
            <th>Person</th>
            <th>Intial risk</th>
            <th>Countermeasure</th>
            <th>Final risk</th>
        </tr>
        <tr>

            <th><input type="text" th:field="*{typeOfWork}" /> </th>
            <th><input type="text" th:field="*{typeOfThreat}" /> </th>
            <th><input type="text" th:field="*{person}" /> </th>
            <th><input type="text" th:field="*{initialRisk}" /> </th>
            <th><input type="text" th:field="*{countermeasure}" /> </th>
            <th><input type="text" th:field="*{finalRisk}" /> </th>

        </tr>
        <button type="button" onclick="addFields()">Insert new row</button>
    </table>

当我使用 jQuery 添加行时，添加了行，但是 Thymeleaf 没有将表单中写入的值发送到模型

<script th:inline="javascript">

function addFields()
{
    document.getElementById("myTable").insertRow(-1).innerHTML = 
        '                <th><input type="text" th:field="*{typeOfWork}" /> </th>\n' +
        '                <th><input type="text" th:field="*{typeOfThreat}" /> </th>\n' +
        '                <th><input type="text" th:field="*{person}" /> </th>\n' +
        '                <th><input type="text" th:field="*{initialRisk}" /> </th>\n' +
        '                <th><input type="text" th:field="*{countermeasure}" /> </th>\n' +
        '                <th><input type="text" th:field="*{finalRisk}" /> </th>';
}

Answer 1

Thymeleaf 在 server 上编译，而 Jquery 在 client 上处理。用户在 client 端收到的所有内容是 html 中不包含 Thymeleaf。您不能使用 JQuery 添加包含 Thymeleaf 代码的行。

这里的解决方案是使用 Ajax 调用 server 来检索新行的数据。