Question

我正在开发一个Django项目，我有一个表格，其中有表格

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

select的值将通过AJAX调用来自后端

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

    })

}

和我的克隆脚本

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

我的问题是当我选择并填充第一行表格时，当添加第二行时，第二行的数据在第二行中丢失

检查我的图像输出

Answer 1

您不应该为新元素创建动态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 2

扩展@ 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
 }

在此之后，你仍然需要调整你的ajax调用，以便它定位最新的克隆元素的id（比如id_manufacturer0而不是id_manufacturer）

Answer 3

var row = document.getElementById（＆＃34; gonnaclone＆＃34;）; var table = document.getElementById（＆＃34; table_purchase＆＃34;）;

将此更改为

var row = document.getElementById（＆＃34; gonnaclone＆＃34;）; var table = document.getElementById（＆＃34;＆＃34;）;

如何正确克隆表tr？

3 个答案: