Question

我想添加新行而不去服务器端。我希望在提交表单时访问我的控制器中的testDtoList。但是testDtoList只包含第一个初始化的行。新添加的行没有绑定到testDtoList。我是怎么做的在jquery中添加th：field？

<table id="testList" class="table table-bordered "> 
    <thead>
        <tr class="success">
            <th class="text-center">No.</th>
        </tr>
    </thead>                        
    <tbody>
      <tr th:each="testDto, iterStat : *{testDtoList}">     
        <td><input type="text" th:field="*{testDtoList[__${iterStat.index}__].data}" /></td>
     </tr>
    </tbody>
 </table>
<button type="button" name="add" id = "addnewrow">add</button>
<button type="submit" name="submit">submitToController</button>

$(function() {
    $("#addnewrow").click(function () {
        $("#testList").each(function () {
            var row = "<tr><td><input type="text"></td></tr>";
            $('tbody', this).append(row);
        }
    }
}

Answer 1

您只需要为input提供正确的name即可。您会注意到您的第一个初始化行的名称为name="testDtoList[0].data"，因此您新添加的行应为name="testDtoList[1].data"，依此类推。

以下内容应该有效：

var newIndex = $("#testList > tbody > tr").length;
var name = "testDtoList[" + newIndex + "].data"
var row = '<tr><td><input type="text" name="' + name + '"></input></td></tr>';
$('tbody', this).append(row);

th：jquery中的字段并与thymeleaf字段绑定

1 个答案: