使用JS添加额外的行

Adding extra line with JS

本文关键字：JS 添加 使用      更新时间：2023-09-26

基本上，我希望在单击添加按钮（最后一个div）时复制这一点，但在名称中添加_1也是

  <div class="form-group">
    <div class="col-sm-2">Size</div>
         <div class="col-lg-3">
             {{ Form::select('size', $sizes, null, ['class' => 'form-control'])}}
         </div>
        <div class="col-sm-1">Colour</div>
         <div class="col-lg-2">
             {{ Form::select('colour', $colours, null, ['class' => 'form-control'])}}
         </div>
         <div class="col-sm-1">Stock</div>
          <div class="col-lg-2">
              <input type="text" name="stock" class="form-control">
          </div>
          <div class="col-md-1">
          <!--- WHEN THIS IS CLICKED ----->
            <a class="btn btn-primary btn-sm" id="add"><i class="fa fa-plus"></i> Add</a>
          </div>
       </div>

当单击添加按钮时，我想再次显示整个表单组，在名称中添加下划线和数字，以防止重复条目。

因此，我认为使用jQuery的东西应该做到这一点，但作为一个jQuery新手，我不知道该写什么。

因此，在单击添加按钮时，它需要在已经存在的表单组下面再次显示整个表单组div，但也要在name属性中添加一个下划线和一个数字，以便在保存到DB时停止重复条目。

下面的代码应该复制块并将新副本附加到主体，最外层div的名称设置为。。。a_x如果我答对了问题，那就是你想要的

 var  x = 0;
    $("#add").click(function(){ 
      x++;
      $('.form-group:first').clone().attr("name", "a_"+x).appendTo($('body'));
      alert(x);
    });

以及w3Schools的链接http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_clone

相关文章：