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不会将以表格形式编写的值发送给Model

<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

我认为您应该使用表的“容器” ID删除该DIV。

Answer 2

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

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

Thymeleaf + jQuery，如何正确添加th：field =“ * {value}”

2 个答案: