th: поле в jquery и bind с полем тимелеафа

Question

Я хочу добавить новую строку, не обращаясь к серверной стороне. И я хочу получить доступ к testDtoList в моем контроллере, когда форма отправлена. Но testDtoList содержит только первую инициализированную строку. строка не привязана к testDtoList. Как добавить поле th: в jquery?

<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);