动态增删表单

动态增删表单

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);
    //设置动态id
    newForm.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;
    }

大体方向如此，希望对你有所借鉴。