BootStrap 動(dòng)態(tài)表單效果
html部分
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<label class="col-sm-3 control-label">承包商</label>
<div class="col-sm-2">
<form:input path="names" cssClass="form-control" name="names" placeholder="名稱"/>
</div>
<div class="col-sm-2">
<form:input path="merchantIds" cssClass="form-control" name="merchantIds" placeholder="ID"/>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
js部分
<script src="${context}/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${context}/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${context}/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="${context}/js/public.js"></script>
<script>
$(document).ready(function () {
var index = 0;
$('#form')
// Add button click handler
.on('click', '.addButton', function () {
if (this.name > 0 && index == 0) {
index = this.name;
}
index++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', index)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="names"]').attr('path', 'contractor[' + index + '].names').attr('name', 'contractor[' + index + '].names').end()
.find('[name="merchantIds"]').attr('path', 'contractor[' + index + '].merchantIds').attr('name', 'contractor[' + index + '].merchantIds').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
})
// Remove button click handler
.on('click', '.removeButton', function () {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-book-index');
// Remove fields
// Remove element containing the fields
$row.remove();
});
</script>
效果圖
以上所述是小編給大家介紹的BootStrap 動(dòng)態(tài)表單效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript顯示當(dāng)然日期和時(shí)間即年月日星期和時(shí)間
使用js顯示當(dāng)然日期和時(shí)間在網(wǎng)頁中很是常見,方法有很多,不過多說大同小異,下面有個(gè)不錯(cuò)的示例,需要的朋友可以感受下2013-10-10
js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果,涉及javascript鼠標(biāo)事件及頁面元素遍歷調(diào)用的實(shí)現(xiàn)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
js 能實(shí)現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法
下面小編就為大家?guī)硪黄猨s 能實(shí)現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript設(shè)計(jì)模式之外觀模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式介紹,外觀模式是用于由于子系統(tǒng)或程序組成較復(fù)雜而提供的一個(gè)高層界面接口,使用客戶端更容易訪問底層的程序或系統(tǒng)接口,需要的朋友可以參考下2014-12-12
一次圍繞setTimeout的前端面試經(jīng)驗(yàn)分享
這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經(jīng)驗(yàn),是一篇有意思的圍繞setTimeout展開的前端開發(fā)考題,考察了for循環(huán)、定時(shí)器setTimeout()、JavaScript閉包、匿名函數(shù)和Promise等,一不小心你可能就會(huì)做錯(cuò),快來看看你有沒有掌握了上面的知識。2017-06-06
html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間
顯示本地時(shí)間的方法有很多,在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間,感興趣的朋友可以了解下2013-09-09

