动态添加/删除div,并获取div 中的input 键值,并组成数据

3 篇文章 0 订阅
2 篇文章 0 订阅

1.点击+或-   ,增加一个div或删除一个div

       
//HTML
 <div class="layui-form-item">
            <label class="layui-form-label noRed" style="font-weight: bold">主要工作经历        </label>
            <div class="addForm">

            </div>
            <button type="button" class="addBtn">+</button>
            <button type="button" class="delBtn">-</button>
        </div>

//js

let delWorks = []

  function addDiv(obj) {
        let div =
            '<div class="bt list" style="border-top: 1px solid #eee;padding-top: 15px;">' +
            '<input type="text" hidden name="id" value="' + obj.id + '" style="display: none" />' +
            ' <div class="layui-form-item">' +
            ' <label class="layui-form-label noRed">开始时间</label>' +
            ' <div class="layui-input-block">' +
            '<input type="text" name="jl_kaishishijian" value="' + obj.jl_kaishishijian + '" placeholder="yyyy/MM/dd" class="layui-input">' +
            ' </div>' +
            ' </div>' +
            ' <div class="layui-form-item">' +
            ' <label class="layui-form-label noRed">结束时间</label>' +
            ' <div class="layui-input-block">' +
            ' <input type="text" name="jl_jieshushijian" value="' + obj.jl_jieshushijian + '"  placeholder="yyyy/MM/dd" class="layui-input">' +
            ' </div>' +
            ' </div>' +
            ' <div class="layui-form-item">' +
            ' <label class="layui-form-label noRed">工作单位</label>' +
            ' <div class="layui-input-block">' +
            ' <input type="text" name="jl_gongzuodanwei" value="' + obj.jl_gongzuodanwei + '" placeholder="请输入工作单位" class="layui-input">' +
            ' </div>' +
            ' </div>' +
            ' <div class="layui-form-item">' +
            ' <label class="layui-form-label noRed">职务</label>' +
            ' <div class="layui-input-block">' +
            ' <input type="text" name="jl_zhiqianzhiwu" value="' + obj.jl_zhiqianzhiwu + '" placeholder="请输入职务" class="layui-input">' +
            '</div>' +
            ' </div>' +
            ' <div class="layui-form-item">' +
            ' <label class="layui-form-label noRed">主要工作</label>' +
            ' <div class="layui-input-block">' +
            ' <input type="text" name="jl_zhuyaogongzuo" value="' + obj.jl_zhuyaogongzuo + '" placeholder="请输入主要工作" class="layui-input">' +
            ' </div>' +
            ' </div>' +
            ' <hr style=" height:2px;border:none;border-top:2px "/>'
        $(".addForm").append(div);
    }


    $(".addBtn").click(function () {
        let obj = {
            id: "",
            jl_kaishishijian: "",
            jl_jieshushijian: "",
            jl_gongzuodanwei: "",
            jl_zhiqianzhiwu: "",
            jl_zhuyaogongzuo: ""
        }
        addDiv(obj)
    });
    /*删除最后一个工作经历对象*/
    $('.delBtn').click(function () {
        let txt = $(".addForm").find('.list').last().find(':text');
        let obj = {};
        for (let j = 0; j < txt.length; j++) {
            obj[txt.eq(j).attr("name")] = txt.eq(j).val();
        }
        if (obj.id != "") {
            delWorks.push(obj)
        }
        $(".addForm").find('.list').last().remove();
        console.log("delWorks:", delWorks)
    })

 

2.获取div中的input值

 /**
         * @Author WangChangDian
         * @Description //TODO 获取div1下的div2数组,并获取里面的值
         * @Date 16:53 2020/8/31
         **/
        let divs = $(".addForm").find('.list');
        let arr = [];
        for (let i = 0; i < divs.length; i++) {
            let txt = $(divs[i]).find(':text');
            let obj = {};
            for (let j = 0; j < txt.length; j++) {
                obj[txt.eq(j).attr("name")] = txt.eq(j).val();
            }
            let is = false
            for (let key in obj) {
                if (obj[key] != "") {
                    is = true
                }
            }
            //过滤掉空对象
            if (is) {
                arr.push(obj)
            }
        }

3.附加:获取from 表单的值

 //editFrom是from 的id,表单中的每一个input和select要有name和value
let params = $("#editFrom").serializeArray();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值