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)表單效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript顯示當(dāng)然日期和時(shí)間即年月日星期和時(shí)間
使用js顯示當(dāng)然日期和時(shí)間在網(wǎng)頁中很是常見,方法有很多,不過多說大同小異,下面有個(gè)不錯(cuò)的示例,需要的朋友可以感受下2013-10-10js實(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-08js 能實(shí)現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法
下面小編就為大家?guī)硪黄猨s 能實(shí)現(xiàn)監(jiān)聽F5頁面刷新子iframe 而父頁面不刷新的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11JavaScript設(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ò),快來看看你有沒有掌握了上面的知識(shí)。2017-06-06html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間
顯示本地時(shí)間的方法有很多,在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間,感興趣的朋友可以了解下2013-09-09