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();