Question

我试图通过jQuery动态添加行，但不是添加1行，而是一次添加2行。

以下是代码：

jQuery代码：

$(document).ready(function() {
  var current_id = 1;
  $('#add').click(function(){
  next_element($('#timesheetrow1'));
 })

 function next_element(element){
 var new_element = element.clone(),
    id = current_id + 1;
    current_id = id;

if (id <7) {
    new_element.attr("id",element.attr("id").split("1")[0]+id);

    $(':input', new_element).each(function(){
      var field_id = $(this).attr("id"),
          field_name = $(this).attr("name");
      $(this).attr("id", field_id.split("1")[0]+id );
      $(this).attr("name", field_name.split("1")[0]+id );
    });
    new_element.appendTo($("#timesheet-rows"));
  }
   };
 });

和HTML代码：

<div id="timesheet-rows">
    <div id="timesheetrow1" class="timesheet-row">

    <input type="text" id="FinalNumber1" name="FinalPONumber1" width="50" />                                         
    <input type="text" id="FinalAmount1" name="FinalPOAmount1" width="50" />                                           
   </div>

   </div>
  <input type="button" value="Add" class="add" id="add" class="GreenBTN"/>

Answer 1

jQuery clone method制作指定元素的深层副本。通过克隆和追加，你将获得指数增长而不是线性增长。即，当你第一次添加一个时，你没问题，但第二次，你将复制原始元素和你添加的孩子，所以你将添加2而不是1.下一次，你将复制原始及其3个孩子，并添加4而不是1，依此类推。

避免此问题的一种方法是使用javaScript的cloneNode而不是jQuery clone。这使您可以选择使其成为深度或浅层克隆：

next_element(document.getElementById("timesheetrow1"));

var new_element = element.cloneNode(false);

jQuery动态添加行

1 个答案: