我连续有 3 个字段,我没有使用表格。所以我想知道在单击 +
按钮时是否可以添加使用 div
标签的新“行”?
代码如下
<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 行。
最佳答案
您可以使用 jQuery 添加和删除带有 id 增量
的表单字段。请看下面的代码片段:
// 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>
希望这对您有所帮助!
关于javascript - 单击按钮后重复/添加 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40842033/