When I add a new row into a table populated by thymeleaf I found several issues.
- I cannot assign any stat.index
- The th:xxx tags are not represented when I add the rows by using javascript
This is my HTML+thymeleaf code:
<table id="table"> <tbody> <tr id="tableBody" th:each="branch, stat : *{branchesVO}"> <td> <input type="number" th:value="*{id}" th:field="*{branch[__${stat.index}__].id}" hidden="true" /> <div> <div> <div class="form-group col-md-6"> <label th:text="#{customerInfo}"/> <input class="form-control" type="text" name="customerInfo" th:value="*{customerInfo}" th:placeholder="#{customerInfo}" th:field="*{branches[__${stat.index}__].customerInfo}"/> </div> <div class="form-group col-md-6"> <label th:text="#{address}" /> <input class="form-control" type="text" name="address" th:value="*{address}" th:placeholder="#{address}" th:field="*{branches[__${stat.index}__].address}" th:required="required" /> </div> </div> <div> <div class="form-group col-md-4"> <label th:text="#{telephone}" /> <input class="form-control" type="text" name="telephone" th:value="*{telephone}" th:placeholder="#{telephone}" th:field="*{branches[__${stat.index}__].telephone}"/> </div> <div class="form-group col-md-4"> <label th:text="#{mobilePhone}" /> <input class="form-control" type="text" name="mobile" th:value="*{cellPhone}" th:placeholder="#{mobilePhone}" th:field="*{branches[__${stat.index}__].cellPhone}"/> </div> <div class="form-group col-md-4"> <label th:text="#{contact}" /> <input class="form-control" type="text" name="contact" th:value="*{contact}" th:placeholder="#{contact}" th:field="*{branches[__${stat.index}__].contact}"/> </div> </div> </div> </td> </tr> </tbody> </table> <div> <hr/> <button type="button" class="btn btn-warning" th:text="#{addBranch}" onclick="addBranch(document.getElementById('table'))"/> </div> This is my js code:
function addBranch(table) { var tableRow = "<tr>" + "<td>" + "<input type='number' th:value='*{id}' th:field='*{branch[__${stat.index}__].id}' hidden='true' />" + "<div>" + "<div>" + "<div class='form-group col-md-6'>" + "<label th:text='#{customerInfo}'/>" + "<input class='form-control' type='text' name='customerInfo' th:value='*{customerInfo}' th:placeholder='#{customerInfo}' th:field='*{branches[__${stat.index}__].customerInfo}'/>" + "</div>" + "<div class='form-group col-md-6'>" + "<label th:text='#{address}'/>" + "<input class='form-control' type='text' name='address' th:value='*{address}' th:placeholder='#{address}' th:field='*{branches[__${stat.index}__].address}' th:required='required'/></div></div>" + "<div><div class='form-group col-md-4'>" + "<label th:text='#{telephone}'/>" + "<input class='form-control' type='text' name='telephone' th:value='*{telephone}' th:placeholder='#{telephone}' th:field='*{branches[__${stat.index}__].telephone}'/>" + "</div><div class='form-group col-md-4'>" + "<label th:text='#{mobilePhone}'/>" + "<input class='form-control' type='text' name='mobile' th:value='*{cellPhone}' th:placeholder='#{mobilePhone}' th:field='*{branches[__${stat.index}__].cellPhone}'/>" + "</div>" + "<div class='form-group col-md-4'>" + "<label th:text='#{contact}'/>" + "<input class='form-control' type='text' name='contact' th:value='*{contact}' th:placeholder='#{contact}' th:field='*{branches[__${stat.index}__].contact}'/>" + "</div></div></div></td></tr>"; var row = table.insertRow(table.rows.length); row.innerHTML = tableRow; } is there any way to make this js (or any other better solution for thymeleaf) add new rows correctly?
