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, строка добавляется, но значения, записанные в форме, не отправляются в Model с помощью 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 для извлечения данных для новой строки.

Answer 2

Я думаю, вам следует удалить этот DIV с идентификатором "контейнера" ​​таблицы.