动态增删表单

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;}