Question

我连续3个字段，我没有使用表格。所以我想知道是否可以添加新的＆＃39; row＆＃39;单击+按钮时使用<div id="order-details-booking"> <blockquote>Self-order Menu</blockquote> <div class="row"> <div class="input-field col s4"> <input type="text" class="item-code" placeholder="Item Code"/> </div> <div class="input-field col s2"> <input type="text" class="qty" placeholder="Qty" /> </div> <div class="input-field col s5"> <input type="text" class="order-remarks" placeholder="Remarks" /> </div> <div class="col s1"> <i class="material-icons">add</i> </div> </div> </div>标记？

代码如下。

最初，它只有1行。

我想要的是，点击{{1}}按钮后，它会添加一个这样的新行。

Answer 1

您可以使用 jQuery 添加以及使用id increment删除表单字段。请查看下面的代码段：

// Cloning Form
  var id_count = 1;
  $('.add').on('click', function() {
    var source = $('.form-holder:first'), clone = source.clone();
    clone.find(':input').attr('id', function(i, val) {
      return val + id_count;
    });
    clone.appendTo('.form-holder-append');
    id_count++;
  });

// Removing Form Field
$('body').on('click', '.remove', function() {
    var closest = $(this).closest('.form-holder').remove();
  });

.form-holder {
  display: flex;
  margin-bottom: 10px;
}

.input-field input {
  width: 100px;
}

.add, .remove {
  display: block;
  border: 1px solid #ccc;
  padding: 2px 10px;
  margin-left: 10px;
  cursor: pointer;
}

.add:hover {
  background: #eee;
}

.remove {
  display: none;
}

.form-holder-append .remove {
  display: block;
}

body {
  margin: 20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
          <div class="form-holder col-xs-12">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons remove">- remove</i>
            </div>
        </div>

          <div class="form-holder-append"></div>
          <div class="row">
                    <div class="col-xs-4">
                          <i class="material-icons add">+ add</i>
            </div></div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望这有帮助！

Answer 2

使用clone()方法。它将创建要追加的行的重复对象。使用此对象将新行添加到父div。

find("input[type='text']").val("")将清除原始元素中输入的任何值。

此外，正如其他人所指出的，您的HTML附加了id个元素，这些元素在复制时会创建多个具有相同ID的元素。您应该避免在这种情况下使用id并使用类作为选择器。

$('#order-details-booking').on('click','.material-icons',function(){
   $(this).closest('.row').clone().appendTo('#order-details-booking').find("input[type='text']").val("");//use closest to avoid multiple selection and clear input text elements
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="order-details-booking">
        <blockquote>Self-order Menu</blockquote>
        <div class="row">
            <div class="input-field col s4">
                <input type="text" id="item-code" placeholder="Item Code"/>
            </div>
            <div class="input-field col s2">
                <input type="text" id="item-code" placeholder="Qty" />
            </div>
            <div class="input-field col s5">
                <input type="text" id="item-code" placeholder="Remarks" />
            </div>
            <div class="col s1">
                <i class="material-icons">add</i>
            </div>
        </div>
    </div>

单击按钮后重复/添加div

2 个答案: