Невозможно клонировать строки таблицы с помощью JQuery

Question

Вот мой стол в DIV:

<div class="employmentHistory"> 
     <table class="employmentHistoryForm"> 
      <tr> 

        <th>Name</th> 
        <th>Position</th> 
        <th>Action</th> 

      </tr> 
      <tr class = "row"> 
       <td> 
        <g:textField id="name" name="company" class="company"></g:textField></td> 
       <td> 
        <g:textField id="position" name="position" class="pos" ></g:textField></td> 
       <td><input type="button" class="deleteThisRow" value="Delete"/></td> 
      </tr> 
     </table> 
    <g:textField name="sumCompany" id="destination" ></g:textField> 
    </div> 

Вот мой JQuery скрипт для клонирования второй строки в таблице выше:

$(document).ready(function(){ 
      //This line clones the row inside the '.row' class and transforms it to plain html. 
      //var clonedRow = $('.row').clone().html(); 
      var clonedRow=$('.row').clone().html().find("input").each(function() { 
       $(this).val('').attr('id', function(_, id) { return id + index }); 
      }).end(); 

      //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags 
      var appendRow = '<tr class = "row">' + clonedRow + '</tr>'; 

      $('#btnAddMore').click(function(){ 
       //this line get's the last row and appends the appendRow when it finds the correct row. 
       $('.employmentHistoryForm tr:nth-child(2)').after(appendRow); 
      }); 

      //when you click on the button called "delete", the function inside will be triggered. 
      $('.deleteThisRow').live('click',function(){ 
       var rowLength = $('.row').length; 
       //this line makes sure that we don't ever run out of rows. 
       if(rowLength > 1){ 
        deleteRow(this); 
       }else{ 
        $('.employmentHistoryForm tr:last').after(appendRow); 
        deleteRow(this); 
       } 
      }); 

      function deleteRow(currentNode){ 
       $(currentNode).parent().parent().remove(); 
      } 
      index++; 
     }); 

При использовании строка в сценарии выше, как:

var clonedRow = $('.row').clone().html(); 

код прекрасно клонирует строку таблицы и добавляет его в конец table.But дю так ли plicates идентификатор поля текстовых полей, и я хочу, чтобы назначить уникальные идентификаторы для клонированных строк, которые я стараюсь, как:

var clonedRow=$('.row').clone().html().find("input").each(function() { 
        $(this).val('').attr('id', function(_, id) { return id + index }); 
       }).end(); 

Но теперь запрос не работает в all.So, где я спутать и Что такое решение?

Answer 1

Я сделал что-то похожее на это, где у меня был скрытый раздел, на котором была сделана надпись, которую я хотел клонировать. Я бы установил id через javascript после его клонирования.

<div id="sectionToClone"> 
    <input class="company" type="text" /> 
    <input class="pos" type="text" /> 
    <!-- More stuff here --> 
</div> 

Тогда в моей JavaScript я хотел бы сделать что-то вроде этого:

var clonedSection = $("#sectionToClone").clone(); 
var newMarkup = clonedSection.attr("id","section" + idCounter); 
newMarkup.find(".company").attr("id","company" + idCounter); 
newMarkup.find(".pos").attr("id","pos" + idCounter); 
idCounter++; 
$("#sectionToAppendTo").append(newMarkup); 

Тогда каждая секция будет иметь уникальные идентификаторы, когда заменить произошло. Когда пришло время получить все значения, я бы начал отдельный счетчик с 0 и увеличил до idCounter, чтобы вытащить значения в массив длиной idCounter и делать с ними по мере необходимости. Каждый вид деятельности будет выглядеть как $("#sectionX .company").val(), $("#sectionX .pos) и т.д ...

В вашем CSS, сделать раздел клонировать скрытый, используя селектор ID:

#sectionToClone{ 
    display: none; 
} 

Тогда при изменении идентификатора в вашем JavaScript клонированный раздел становится видимым, поскольку правило CSS к нему не применяется.