javascript - 如何在点击时重复某个部分？

Question

我有这个 fiddle https://jsfiddle.net/74mh06v9/我在如何重复表单组上陷入困境？

我使用的代码如下；

$(function () {
        $(".repeat").on('click', function (e) {
        e.preventDefault();
        var $self = $(this);
        $self.before($self.prev('table').clone());
        });
    });

我的 HTML 是

     <div class="col-md-12" class="repeatable">          
        <h4>Invoice Details </h4>
<table>
    //various form groups here to repeat
</table>
    <button class="repeat">Add Another</button>

Answer 1

首先，你的html在表格内是错误的，应该有td、tr等，但你放置了div，我不知道为什么。我已经改正了现在正在工作。HTML:

<div class="col-md-12" class="repeatable">
  <div class="base-group" style="display:none;">
    <h4>Invoice Details </h4>
    <div class="col-sm-3">
      <div class="form-group">
        <label>Service User</label>

        <div class="input-group">
        <input name="service_user" id="service_user" class="form-control" type="text"></div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Hours</label>
          <div class="input-group">
            <input name="total_hours" id="total_hours" class="form-control" type="text">
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Rate</label>
          <div class="input-group">
            <input name="rate" id="rate" class="form-control" type="text">
          </div>
        </div>


      <div class="col-sm-3">
        <div class="form-group">
          <label>Sub Total</label>
          <div class="input-group">
            <input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
          </div>
        </div>
      </div>
    </div>



</div>

   <div id="main-form">

   <div class="child-group">
    <h4>Invoice Details </h4>
    <div class="col-sm-3">
      <div class="form-group">
        <label>Service User</label>

        <div class="input-group">
        <input name="service_user" id="service_user" class="form-control" type="text"></div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Hours</label>
          <div class="input-group">
            <input name="total_hours" id="total_hours" class="form-control" type="text">
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="form-group">
          <label>Rate</label>
          <div class="input-group">
            <input name="rate" id="rate" class="form-control" type="text">
          </div>
        </div>


      <div class="col-sm-3">
        <div class="form-group">
          <label>Sub Total</label>
          <div class="input-group">
            <input name="invoice_amount" id="invoice_amount" class="form-control" type="text">
          </div>
        </div>
      </div>
    </div>
</div>

   </div>
<button type="button" class="repeat">Add Another</button>

JS:

$(function() {
  $(".repeat").on('click', function(e) {
        var c = $('.base-group').clone();
    c.removeClass('base-group').css('display','block').addClass("child-group");
    $("#main-form").append(c);
  });
});

fiddle https://jsfiddle.net/riazxrazor/74mh06v9/9/如果你想尝试