Question

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

Firslty，不需要表（没有行和列），并将table替换为div并向其添加类frm，然后进行克隆并附加它

$(function() {
  $(".repeat").on('click', function(e) {
    var frm =$('.frm:first').clone();
    frm.find('input').val('');
    $('.frm:last').after(frm);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 repeatable">
  <div class="frm">
    <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>
<button class="repeat">Add Another</button>

Answer 2

上述答案略有变化：

<script>
    $(function () {
            $(".repeat").on('click', function (e) {
            e.preventDefault();
            var clonedForm = $(".frm").clone();
            clonedForm.appendTo("#table");
            frm.find('input').val('');
            });
        });
    </script>

     <div class="col-md-12" class="repeatable">        
    <table id  ="table">
     <div class="frm">
      <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>
    </table>
    <button class="repeat">Add Another</button>

Answer 3

首先你的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/ 如果你想尝试

如何重复点击一节？

3 个答案: