動態增刪表單

1.實現效果

2.兩種方式，推薦第二種（不管是第一種還是第二種，想要序列化都必須，id不同）

（1）表單clone的方式（簡單演示，道理相通）

<div id="cxdx"><form id="formBody0"><table></table></form><div>

表單clone主要是js。

//form表單命名 var length = 1; //新增查詢對象 function addCxdx() {var $form = $("#cxdx form").last();//克隆好的form表單var newForm = $form.clone(true);//設置動態idnewForm.attr("id", 'formBody' + length);newForm.find(":input").not(":button").each(function (i) { //循環新克隆form表單在里邊找到所有的input標簽，if ($(this).not(":radio").length > 0 && !$(this).prop("disabled")) {$(this).val(""); //給不是radio框的inputvalue賦值為空setCheckVal($(this),false);}});newForm.find('[id]').each(function (index, value){$(value).attr('id',$(value).attr('id').replace(/\d+/,'') + length);});//表單刪除需要自定義的指向它父元素的id。newForm.find('[deleteCxdx]').each(function (index, value){$(value).attr('deleteCxdx',$(value).attr('deleteCxdx').replace(/\d+/,'') + length);});//必填校驗變色的newForm.find('[changeColorForNull]').each(function (index, value){$(value).attr('changeColorForNull',$(value).attr('changeColorForNull').replace(/\d+/,'') + length);});//新增表單樣式去除newForm.find('[style]').attr('style','');//追加$("#cxdx").append(newForm);//查詢對象初始化$('.select_option').remove();selectInit($('.inputSel'));length++; } //刪除查詢對象 function deleteCxdx() {//獲取子form表單的數量var len = $("#cxdx form").length;//被選中的復選框的數量var checklength = $(":checkbox[name='selectCxdx']:checked").length;if (len === checklength){layer.alert("至少保留一個查詢對象", {icon: 0});}else {$(":checkbox[name='selectCxdx']:checked").each(function (index,value) {$("#" + $(value).attr('deleteCxdx')).remove();})} }

因為沒有table的樣式看著比較奇怪，下面的模板就是一個這樣的表單，我把class里面的樣式去除了，公司封裝，你們也用不了。但是js大體如此。

（2）寫一個模板進行復制

1.模板（這是一個jsp,就叫cxdxTemplate.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <table class="" id="cxdxTable${index}"><colgroup><col style="width: 5%"/><col style="width: 20%"/><col style="width: 20%"/><col style="width: 10%"/><col style="width: 15%"/><col style="width: 15%"/><col style="width: 15%"/></colgroup><tr><td rowspan="4"><label><input class="" deleteCxdx="cxdxTable${index}"type="checkbox"id="selectCxdx${index}" name="selectCxdx"></label></td><td class="">案號<i class="required">*</i></td><td class="" changeColorForNull="ah${index}"><input class="noNull" type="text" id="ah${index}"name="ah"notNull="案號"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,50)"/></td><td class="">承辦人<i class="required">*</i></td><td class="" changeColorForNull="cbr${index}"><input class="noNull" type="text" id="cbr${index}"name="cbr" notNull="承辦人"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,20)"/></td><td class="">書記員<i class="required">*</i></td><td class="" changeColorForNull="sjy${index}"><input class="noNull" type="text" id="sjy${index}"name="sjy" notNull="書記員"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,20)"/></td></tr><tr><td class="">查詢對象<i class="required">*</i></td><td class="" changeColorForNull="mc${index}"><input class="noNull" type="text" id="mc${index}"name="mc"notNull="查詢對象"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,100)"/></td><td class="">涉案身份</td><td class=""><select class="" id="ssdw${index}" name="ssdw"><option value=""></option><c:forEach items="${sasf}" var="sasf"><option value="${sasf.key}">${sasf.value}</option></c:forEach></select></td><td class="">類型<i class="required">*</i></td><td class=""><input class="" type="text" value="自然人" disabled="disabled"onfocus="myFocus(this)"/></td></tr><tr><td class="">證件類型<i class="required">*</i></td><td class="" changeColorForNull="zjlx${index}"><select class="noNull" id="zjlx${index}" name="zjlx"notNull="證件類型"onchange="myFocus(this)"><option value=""></option><c:forEach items="${zjfl}" var="zjfl"><option value="${zjfl.key}">${zjfl.value}</option></c:forEach></select></td><td class="tdTitle">證件號碼<i class="required">*</i></td><td class="" colspan="3" changeColorForNull="zjhm${index}"><input class="noNull" type="text" id="zjhm${index}"name="zjhm" notNull="證件號碼"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,30)" oninput = "value=value.replace(/[\u4e00-\u9fa5]{0,}$/g,'')"/></td></tr><tr><td class="">國家或地區</td><td class=""><select class="" id="gj${index}" name="gj"><option value=""></option><c:forEach items="${gj}" var="gj"><option value="${gj.key}">${gj.value}</option></c:forEach></select></td><td class="">戶籍地<i class="required">*</i></td><td class="" colspan="3"changeColorForNull="hjszd${index}"><input class="noNull" type="text"id="hjszd${index}"name="hjszd" notNull="戶籍地"onfocus="myFocus(this)" value="" onkeyup="checkLength(this,30)"/></td></tr> </table>

2.這是復制table,form也是類似的，js發請求

//初始加載 $(function () {//初始加載的時候就把length獲取到length = $("#cxdxPart table").length; }) //新增查詢對象 function addCxdx() {$.ajax({url: getUrlPath() + '/cxdxTemplate.do',type: 'POST',dataType: 'html',data: {"length": length++},success: function (res) {var resCxdx = $(res);$('#cxdxPart').append(resCxdx);//去除樣式的，可以不必關注checkboxInit(resCxdx.find('.inputCheck'));$('.select_option').remove();selectInit($('.inputSel'));},error: function (res) {layer.alert(res.message, {icon: 7});}}) } @PostMapping(value = "/cxdxTemplate.do")public ModelAndView cxdxTemplate(int length) {log.info("查詢對象表格的數量: {}", length);ModelAndView mav = new ModelAndView("cxdxTemplate");//這里傳你需要回填的一些數據mav.addObject("xxx", xxx);mav.addObject("index", length);return mav;}

大體方向如此，希望對你有所借鑒。

總結

以上是生活随笔為你收集整理的动态增删表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。