Spring 动态行胸腺

我想在Thymeleaf和Spring Boot中创建动态添加和删除列表行。 我不知道如何在动态行中使用thymeleaf，但我正在尝试这样做 这是我的代码：

public class Form{
    private List<Obj> list = new ArrayList<>();
//...
}


public class Obj{
   private String a;
}

HTML:

[...]
<form class="form-horizontal row-border" action="#" th:action="@{/form}" th:object="${form}" method="post">
    <div class="form-group">
        <div class="col-md-12">
            <div class="row">
                <label class="col-md-2 control-label">...</label>
                <div class="col-md-10">
                    <table id="myTable" class=" table order-list">
                        <thead>
                        <tr>
                            <td>String</td>

                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="row:${list}">
                            <td class="col-sm-1">
                                1
                            </td>
                            <td class="col-sm-3">
                                <input th:field="*{list[__${row.index}__].a}" type="text" name="xyz"  class="form-control"/>
                            </td>

                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5" style="text-align: left;">
                                <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add row" />
                            </td>
                        </tr>
                        <tr>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>                   
</form>

[...]

[…]
...
一串
1.
[...]

---

但是我不知道如何从表单获取数据并将其发送到控制器。控制器根据输入名称接收您的数据

th:field

以正确的方式设置输入名称，以便控制器接收它

遗憾的是，如果您在客户机中添加一个新行，其中不再存在thymeleaf，则必须手动设置正确的名称。您可以使用以下js函数（或任何其他方式）在新行输入中查找要设置的名称：

---

nextRow将有下一个空闲行，只需使用它以thymeleaf生成的方式创建一个名称，并将其设置为新输入的名称。

我不完全理解，您能写一个示例吗？

[...]
<form class="form-horizontal row-border" action="#" th:action="@{/form}" th:object="${form}" method="post">
    <div class="form-group">
        <div class="col-md-12">
            <div class="row">
                <label class="col-md-2 control-label">...</label>
                <div class="col-md-10">
                    <table id="myTable" class=" table order-list">
                        <thead>
                        <tr>
                            <td>String</td>

                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="row:${list}">
                            <td class="col-sm-1">
                                1
                            </td>
                            <td class="col-sm-3">
                                <input th:field="*{list[__${row.index}__].a}" type="text" name="xyz"  class="form-control"/>
                            </td>

                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="5" style="text-align: left;">
                                <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add row" />
                            </td>
                        </tr>
                        <tr>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>                   
</form>

[...]

var nextRow = 0;

while($("input[name='list[" + nextRow + "].a']").length){
    nextRow ++;
}