テーブルtrを正しくクローンするには？私は、Djangoのプロジェクトに取り組んでいます

Question

私はフォームを持っているテーブル

<table name="mytable" id="table_purchase" role="grid"> 
    <thead> 
    <tr> 
     <th class="text-center" hidden>No</th> 
     <th class="text-center" hidden>Part Id</th> 
     <th class="text-center">Manufacturer *</th> 
     <th class="text-center">Phone Model *</th> 
     <th class="text-center">Part Name *</th> 
     <th class="text-center">Quantity *</th> 
     <th class="text-center">Price *</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id = "gonnaclone"> 
     <td> 
      {% if count_phonemaster %} 
       <div class="col-md-12 column"> 
        <select class='form-control' name="phoneManufacturer" id='id_manufacturer' onchange="selected_manufacturer(this)" required> 
         <option value="" selected disabled>Please select</option> 
          {% for phoneManufacturerObject in phoneManufacturer %} 
           <option>{{ phoneManufacturerObject.phoneManufacturer }}</option> 
          {% endfor %} 
        </select> 
       </div> 
      {% else %} 
      <div class="col-md-12 column"> 
       <select class='form-control' name="phoneManufacturer" id='id_nomanufacturer' data-toggle="modal" data-target="#no_manufacturer" required> 
        <option value="" selected disabled>Please select</option> 
       </select> 
      </div> 
      {% endif %} 
     </td> 
     <td> 
      <div class="col-md-12 column"> 
       <select class='form-control' name="modelName" id='id_model' onchange="selected_model(this)" required> 
        <option value="" selected disabled>Please select</option> 
       </select> 
      </div> 
     </td> 
     <td> 
      <div class="col-md-12 column"> 
       <select class='form-control' name="partName" id='id_part' required> 
        <option value="" selected disabled>Please select</option> 
       </select> 
      </div> 
     </td> 
     <td> 
      <input type="text" name='quantity' class="form-control" pattern="^[0-9]{1,}$" maxlength="11" required/> 
     </td> 
     <td> 
      <input type="text" name='costPerUnit' class="form-control" pattern="^[0-9]{1,}$" maxlength="11" required/> 
     </td> 
    </tr> 
</tbody> 

<a id="add_row" class="btn btn-primary btn-md" onclick="add()" style="padding:10px 60px">Add Row</a> 
          <a id="remove_row" class="btn btn-default btn-md" onclick="remove()" style="padding:10px 47px;">Remove Row</a> 
          <button id="button1id" class="btn btn-primary btn-md" type="submit" style="padding:10px 66px;">Submit</button> 
          <a href="/" class="btn btn-success btn-md" type="reset" style="padding:10px 67px; background-color:#95a5a6; border-color:#95a5a6;">Cancel</a> 

がある中での選択のための値は、

ajaxPost('/url/',{'phoneManufacturer':phoneManufacturer} ,function(result){ 

     $("#id_model option").remove(); 
      var div_defaultdata = '<option value="" selected disabled>Please select</option>'; 
      $("#id_model").append(div_defaultdata); 
       for(var i = 0;i<result.length;i++){ 
        var div_data = '<option value="'+result[i]+'">'+result[i]+'</option>'; 
        $("#id_model").append(div_data); 
       } 

    }) 

} 
function selected_model(modelName) { 
    var modelName = modelName.value; 
    var phoneManufacturer = document.getElementById("id_manufacturer").value 
    ajaxPost('/url/',{'modelName': modelName , 'phoneManufacturer':phoneManufacturer} ,function(result){ 
     $("#id_part option").remove(); 
      var div_defaultdata = '<option value="" selected disabled>Please select</option>'; 
      $("#id_part").append(div_defaultdata); 
        for(var i = 0;i<result.length;i++){ 
        var div_data = '<option value="'+result[i]+'">'+result[i]+'</option>'; 
        $("#id_part").append(div_data); 
     } 

    }) 

} 

AJAX呼び出してフォームのバックエンドを来ているし、この私のクローンスクリプト

function add(){ 
$("table").append($("table") 
.find("#gonnaclone").clone().removeAttr("id") 
.find("input").val("").end()); 
} 

function cloneRow() { 
    var row = document.getElementById("gonnaclone"); 
    var table = document.getElementById("table_purchase"); 

    var clone = row.cloneNode(true); // copy children too 
    clone.id = "gonna"; // change id or other attributes/contents 
    table.appendChild(clone); // add new row to end of table 
} 

function remove(){ 
var tbl = document.getElementById('table_purchase'); 
var lastRow = tbl.rows.length; 
if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 

私はイメージで私の出力をチェック選択して、テーブルの1行目を記入したときに2行目

に1行目のデータが欠落している第二の行を追加したとき

私の問題は、「

Answer 1

VAR行=のdocument.getElementById（ "gonnacloneをターゲットにしていることなので、あなたのAJAX呼び出しを調整する必要があります"）; var table = document.getElementById（ "table_purchase"）;

VAR行=のdocument.getElementById（ "gonnaclone"）に変更、これを。 var table = document.getElementById（ ""）;

Answer 2

Shouldnです新しい要素の動的IDを作成しますか？ clone.id = "gonna"は、作成された新しい要素ごとに同じidを設定しています。 - lofihelsinki

lolfihelsinkiが正しいです。クローンを作成して追加するたびに、各行に異なるIDを追加する必要があります。このコードを試すことができます。

var count_id = 0 
function cloneRow() { 
     count_id++; 
     var row = document.getElementById("gonnaclone"); 
     var table = document.getElementById("table_purchase"); 

     var clone = row.cloneNode(true); // copy children too 
     clone.id = "gonna_"+count_id; // change id or other attributes/contents 
     table.appendChild(clone); // add new row to end of table 
    } 

私はそれが役に立ちそうです。

Answer 3

@ rodolfo-bagay答えを展開すると、すべての要素のIDにの固有の番号を割り当てる必要があります。も同様です。

var count_id = 0 
function cloneRow() { 
    count_id++; 
    var row = document.getElementById("gonnaclone"); 
    var table = document.getElementById("table_purchase"); 
    var clone = row.cloneNode(true); // copy children too 

    // Change child elements' id's 
    clone.find("[id]").each(function(i) { 
    $(this).id = $(this).id + count_id; 
    }); 

    clone.id = "gonna_"+count_id; // change id or other attributes/contents 
    table.appendChild(clone); // add new row to end of table 
} 

はこの後、あなたはまだそれが最新の複製された要素のidの（のようなid_manufacturer0代わりid_manufacturerの）