Установка уникальных идентификаторов элементов формы при динамическом создании

Question

Я создаю скрипт для динамического добавления строки. Я использую для этого функцию ниже. Однако проблема состоит в том, что она создает новую строку, но не присваивает уникальные идентификаторы элементам.

Javascript:

$(document).ready(function() { 
    var counter = 1; 
    $("#add_row").click(function() { 
     var row_id = "row" + counter; 
     console.log(row_id); 
     new_elem = $("#new_row").clone().appendTo("#table_invoice tbody").show().attr("id", row_id); 
     var button_id = "button" + row_id; 
     var input_id = "row" + row_id; 
     document.getElementById('row_id').firstChild.setAttribute('id',input_id); 
     document.getElementById('row_id').firstChild.nextSibling.setAttribute('id',button_id); 
     console.log(button_id); 
     console.log(input_id); 
     counter += 1; 
    }); 
}); 

HTML:

<table class="table table-striped" id="table_invoice"> 
    <thead> 
     <tr> 
      <th>Product ID</th> 
      <th>Product Name</th> 
      <th>Product Price</th> 
     </tr> 
    </thead> 
    <tbody> 
<tr id ="new_row" style="display:none;"> 
    <th><input type="text" class="form-control" placeholder="Enter Product ID" /></th> 
    <th><button type="button" class="btn btn-default"">Add Product</button></th> 
    <th></th> 
    <th></th> 
</tr> 
</tbody> 
</table> 
<a id="add_row" class="btn bt-default">Add New Row</a> 

Кроме того, я получаю следующее сообщение об ошибке:

TypeError: document.getElementById(...).firstChild.setAttribute is not a function

не могу понять, почему это не действует функция.

Answer 1

с помощью JQuery это, как вы это делаете: DEMO

к сведению, что я изменил все row_id с, чтобы противостоять, потому что я считаю, что это намеченная подход.

$(document).ready(function() { 
     var counter = 1; 
     $("#add_row").click(function() { 
      var row_id = "row" + counter; 
      console.log(row_id); 
      new_elem = $("#new_row").clone().appendTo("#table_invoice tbody").show().attr("id", row_id); 
      var button_id = "button" + counter; 
      var input_id = "input" + counter; //I think you meant "input" because if you set "row" at the beginning it would be duplicated of the tr 
      $('#'+row_id).find('button').attr('id',button_id); 
      $('#'+row_id).find('input').attr('id',input_id); 
      console.log(button_id); 
      console.log(input_id); 
      counter++; 
     }); 
    }); 

Answer 2

Что это значит, не удалось найти элемент в предыдущих методах, до firstChild. Поскольку он не смог найти элемент, значение в цепочке в этой точке не определено, что, конечно, не имеет метода setAttribute. Если бы он нашел элемент, который вы ищете, ошибка не возникла бы.

The problem is you're doing this: 

document.getElementById ('ROW_ID')

, когда вы имеете в виду

document.getElementById('row_id') 

... т.е. row_id - это переменная и должна указываться как таковая, а не как строка.