Динамическое добавление / удаление строк в Thymeleaf

Question

Я реализовал динамическое добавление / удаление строк в thymeleaf с помощью jquery. Но я не могу захватить значения строк как массив объектов json.

$(function(){      
         $('#addMore').on('click', function() {          
             var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#tab_logic");
             data.find("input").val('');
    });
    $(document).on('click', '.remove', function() {
        var trIndex = $(this).closest("tr").index();
           if(trIndex>1) {
            $(this).closest("tr").remove();
          } 
     });

Таблица, к которой добавляется / удаляется динамическая строка, выглядит следующим образом: -

<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
    <th>Team lead</th>
    <th>Sales volume</th>
    <th><a href="javascript:void(0);"
        style="font-size: 18px;" id="addMore"> <span
            class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<tr>
    <td>
    <input  type="text" name="teamLead"  class="form-control" ></input>
    </td>
    <td>
    <input  type="text" name="salesVolume"  class="form-control" ></input>
    </td>
    <td>
    <a href='javascript:void(0);' class='remove'><span
            class='glyphicon glyphicon-remove'></span></a>
    </td>
</tr>

</table>

Answer 1

Вы можете сериализовать ввод форм с помощью функции serialize (). Это вернет строку запроса, которая затем может быть преобразована в объект JSON с помощью JSON.stringify (). Поэтому я рекомендую добавить все в форму и затем сериализовать ее.

HTML

<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
    <th>Team lead</th>
    <th>Sales volume</th>
    <th><a href="javascript:void(0);"
        style="font-size: 18px;" id="addMore"> <span
            class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<form id="myForm>
<tr>
    <td>
    <input  type="text" name="teamLead"  class="form-control" ></input>
    </td>
    <td>
    <input  type="text" name="salesVolume"  class="form-control" ></input>
    </td>
    <td>
    <a href='javascript:void(0);' class='remove'><span
            class='glyphicon glyphicon-remove'></span></a>
    </td>
</tr>
</form>
</table>

Javascript / JQuery

$(function(){      
     $('#addMore').on('click', function() {
         // Add the row to your form, not the table.          
         var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#myForm");
         data.find("input").val('');
});

$(document).on('click', '.remove', function() {
    var trIndex = $(this).closest("tr").index();
       if(trIndex>1) {
        $(this).closest("tr").remove();
      } 
 });

 // Method that will generate the JSON object.
 function toJSON() {
     var data = $('#myForm').serialize();
     console.log(JSON.stringify(data));
 }