layui 表单动态添加、删除input框

淩亂°似流年 2022-08-29 09:45 562阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]  
html部分

<div class="layui-form-item" >
        <label class="layui-form-label">路线</label>
        <div class="layui-input-block" id="last">
            <div class="layui-input-inline">
                { empty name="$ways"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                    </div>
                </div>
                { else /}
                
                { volist name="ways" id="vo"}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" lay-verify="required" value="{ $vo.name}"
                            class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button type="button"
                            class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i
                                class="layui-icon"></i></button>
                    </div>
                </div>
                { /volist}
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="ways[]" placeholder="请输入"
                            autocomplete="off" class="form-control" style="width: 200%;">
                    </div>
                    <div class="layui-input-block" style="margin-left: 480px">
                        <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                    </div>
                </div>
                { /empty}
            </div>
    
        </div>
    </div>

js部分

layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () { 
        var form = layui.form
            , element = layui.element
            , laydate = layui.laydate
            , $ = layui.$;
    
        //动态添加input输入框
        $("#add").click(function () { 
            var str = '<div class="layui-form-item">' +
                '<div class="layui-input-inline">' +
                '<input type="text" name="ways[]" lay-verify="required"' +
                'class="form-control" style="width: 200%;">' +
                '</div>' +
                '<div class="layui-input-block" style="margin-left: 480px">' +
                '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
                '</div>' +
                '</div>';
    
            $("#last").append(str);
            x++;
        });
    
        //删除动态添加的input输入框
        $("body").on('click', ".removeclass", function () { 
            //元素移除前校验是否被引用
            var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
            var parentEle = $(this).parent().parent();
            parentEle.remove();
        });
    })

layui form表单 动态添加、删除input框，以及数据回显  
在form表单中，动态增加input框，最多添加5个，删除校验

html代码

<form class="layui-form" th:action="@{/basicInfo/update/project}" method="post">
            <div class="layui-form-item" id="last">
                 <label class="layui-form-label">开发项目核准名</label>
                 <div class="layui-input-inline">
                     <input type="text" id="projectApprovalName" name="projectApprovalName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input input-double-width">
                     <input class="layui-input" type="hidden" id="id" name="id"  th:value="${estateInfo.id}">
                 </div>
                 <div class="layui-input-inline" style="margin-left: 180px">
                     <button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                         <i class="layui-icon"></i>
                     </button>
                 </div>
                 <span class="layui-word-aux">备注：最多添加5个项目核准名，每个长度为2-15个字符</span>
             </div>
    </form>

js代码

\----------------------------------------------------------------------自己的项目--------------------------------------------------------------------------  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 1]

<div class="layui-form-item" >
                     <label class="layui-form-label" style="width: 90px;">服务器ip端口</label>
                        <div class="layui-input-block" id="last2">
                        <div class="layui-input-inline">
                            <div class="layui-form-item">
                                <div class="layui-input-inline" style="width: 151px;!important;" >
                                    <input type="text" name="ways[]"
                                           class="layui-input"  required lay-verify="required"  autocomplete="off" class="form-control" style="width: 200%;">
                                </div>
                                <div class="layui-input-block" style="margin-left: 310px">
                                    <button id="add2" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                                        <i class="layui-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

//layui 表单动态添加、删除input框  ---start
            //动态添加input输入框
            var x = 1;
            $("#add2").click(function () { 
                var str = '<div class="layui-form-item" style="margin-left: 10px;" > ' +
                    '<div class="layui-input-inline" style="width: 151px;!important;">' +
                    '<input type="text" name="ways[]" lay-verify="required"' +
                    'class="form-control layui-input" style="width: 200%;" >' +
                    '</div>' +
                    '<div class="layui-input-block" style="margin-left: 310px">' +
                    '<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +
                    '</div>' +
                    '</div>';
    
                $("#last2").append(str);
                x++;
            });
    
            //删除动态添加的input输入框
            $("body").on('click', ".removeclass", function () { 
                //元素移除前校验是否被引用
                var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();
                var parentEle = $(this).parent().parent();
                parentEle.remove();
            });
           //---------end----------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70]: /images/20220829/593eec7b97e94d18b90ae46e51301774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNjczOA_size_16_color_FFFFFF_t_70 1]: /images/20220829/3a0c4b975d09427682fec90dffa33d99.png