javascript - 如何重复点击部分？

我在这个小提琴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>

最佳答案

首先，您的html ws表格内部错误，应该有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);
  });
});

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

关于javascript - 如何重复点击部分？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44586914/