Jquery 克隆和 HTML 阵列

Question

构建一个表格来捕获进入仓库的货物尺寸。表格一行有四个字段：Pieces, Width, Length, Height

行的末尾有一个按钮，如果要捕获更多数据，可以添加其他行。即可能有两件具有一组尺寸，另外两件具有不同尺寸。无法提前知道将捕获多少行数据。我将字段命名为 pieces[]、length[]、width[] 和 height[]

我有两个问题。
1. 当我使用 jquery 克隆行时，它第一次添加 1 行，然后添加 2 行，然后添加 4 行。即它正在复制新行而不仅仅是第一行。

克隆行后，值将移动到新行中。如您所见，我尝试设置为零但没有效果。你如何操作 jquery 中的 HTML 数组字段？

//Add more dimensions if required
    var cloneCount = 0;
   $("#consignment_dimensions_button").click(function(){    
        $( "#consignment_dimensions")
            .clone()       
            .attr('name','consignment_dimensions'+cloneCount++)         
            .prependTo( "#consignment_dimensions" );   

            $('#consignment_dimensions_button:last').remove();
            $('#pieces[]:last').val)(0) 
            $('#length[]:last').val(0);
            $('#width[]:last').val(0);
            $('#height[]:last').val(0);
    });

//end of adding dimensions

和我的HTML

    <div class="row" id='consignment_dimensions'>
      <div class="col-15">
        <label for="dims">Dimensions</label>
      </div>
      <div class="col-10">
        <input type="text" id="pieces[]" name="pieces[]" maxlength ="6" placeholder="Pieces">
      </div>

      <div class="col-15">
        <input type="text" id="length[]" name="length[]" maxlength ="6" placeholder="Length">
      </div>  

      <div class="col-15">
        <input type="text" id="width[]" name="width[]" maxlength ="6" placeholder="Width">
      </div>  

      <div class="col-15">
        <input type="text" id="height[]" name="height[]" maxlength ="6" placeholder="Height">
      </div>
         <div class="col-10">   
          <input type="button" class="my-button" name="consignment_dimensions_button" id="consignment_dimensions_button" value="Add more dims">  

          </div>    
      </div>

Answer 1

第一个问题是因为您将 clone() 重新添加到您从中克隆的元素中，因此下次您克隆时它包含原始字段以及所有之前添加的字段。要解决此问题，请将内容添加到 #consignment_dimensions 的父元素。在下面的示例中，我使用了 #container.

其次，val(0) 不适合您，因为 [ 和 ] 字符在选择器中具有特殊含义，您需要使用 [=18= 对它们进行转义] - 尽管您正在复制这些 id，所以我建议删除此逻辑并将其替换为 class。

也就是说还有其他几个问题。

您复制了很多 id 需要唯一的属性。在这种情况下，我建议从所有元素中完全删除 id 并仅使用 classes.
不是删除每个克隆集的 button，而是将按钮保留在克隆 HTML 之外。
你使用 :last 是无效的，因为你在前面添加内容，所以它会转到容器的开头。通过对 classes/ids 的上述修改，它无论如何都是多余的。
在克隆上调用 removeAttr('id') 以防止复制其 id

$("#consignment_dimensions_button").click(function() {
  var $clone = $("#original.consignment_dimensions").clone().removeAttr('id').prependTo("#container");
  $clone.find('.pieces, .length, .width, .height').val(0);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="row consignment_dimensions" id="original">
    <div class="col-15">
      <label for="dims">Dimensions</label>
    </div>
    <div class="col-10">
      <input type="text" class="pieces" name="pieces[]" maxlength="6" placeholder="Pieces">
    </div>
    <div class="col-15">
      <input type="text" class="length" name="length[]" maxlength="6" placeholder="Length">
    </div>
    <div class="col-15">
      <input type="text" class="width" name="width[]" maxlength="6" placeholder="Width">
    </div>
    <div class="col-15">
      <input type="text" class="height" name="height[]" maxlength="6" placeholder="Height">
    </div>
  </div>
  <input type="button" class="my-button" name="consignment_dimensions_button" id="consignment_dimensions_button" value="Add more dims">
</div>

Jquery 克隆和 HTML 阵列

Jquery cloning and HTML arrays

html

jquery

clone