问题描述
最近做项目的时候遇到了一个问题。具体情况是这样的——在一个页面中，根据后台传来的数据。我需要动态的创建多的表单。这些表单在编辑或者提交时需要做到互不干扰。
如图：
之前在网上看了很多文章，大部分都是关于表格的。由于不是专业前端所以一直困扰了我很久。最后终于找到了解决方案
问题解决
1️⃣ 解决思路，首先页面中有两个按钮，一个是修改，一个是提交。我们的需求是点击哪一个表单里面的提交按钮。就提交哪个表单。
2️⃣ 先给按钮添加单击点击事件
$(document).on('click','.SubmitBook',function(){
}
3️⃣然后通过$(this).closest(“form”).attr(“id”) 去寻找当前的元素（这儿根据from标签去寻找），并获取元素属性。最后拿到对应的from id 去做表单json操作并传给后台。
关于closest()方法：
Jquery.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）
具体用法请参考：Jquery.closest()
完整代码：
//动态生成表单
for (var i=0;i<datas.length;i++){
var html =
' <hr style="height:1px;border:none;border-top:1px dashed black;">\n' +
'<form name="'+bookLog+'" id="'+bookLog+'" class="layui-form " lay-filter="'+bookLog+'" action="" >\n' +
' <input type="hidden" id="ciId" name="ciId" >\n' + //该标签不显示，只传值
' <div class="layui-form-item" >\n' +
' <div class="layui-inline" >\n' +
' <input id="RankTitle" value="'+RankTitle+'" style="width: auto;text-align: center ; border:none">\n' +
' </div>\n' +
' </div>\n' +
'\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <label class="layui-form-label" style="width: auto">司机姓名：</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text"id="ciDriver" name="ciDriver" lay-verify="ciDriver" autocomplete="off" class="layui-input" disabled="" >\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
'\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <label class="layui-form-label" style="width: auto">前车牌号：</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" id="ciFrontCarnum" name="ciFrontCarnum" autocomplete="off" class="layui-input demo-phone" disabled="">\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <label class="layui-form-label" style="width:auto">挂车牌号：</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" id="ciBackCarnum" name="ciBackCarnum" placeholder="" autocomplete="off" class="layui-input " disabled="">\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <label class="layui-form-label" style="width: auto">车辆类型：</label>\n' +
' <div class="layui-input-inline">\n' +
' <select class="layui-form-select" name="ciCarType" lay-verify="" id="ciCarType" disabled>\n' +
' <option value="">请选择</option>\n' +
' <option value="0">普通货车</option>\n' +
' <option value="1">挂式货车</option>\n' +
' </select>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline" >\n' +
' <label class="layui-form-label" style="width: auto">业务类型：</label>\n' +
' <div class="layui-input-inline">\n' +
' <select class="layui-form-select" name="ciBusinessType"+i lay-verify="ciBusinessType" id="ciBusinessType"+i disabled>\n' +
' <option value="">请选择</option>\n' +
' <option value="0">卸货</option>\n' +
' <option value="1">装货</option>\n' +
' <option value="2">其他</option>\n' +
' </select>\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <label class="layui-form-label" style="width: auto">到达日期：</label>\n' +
' <div class="layui-input-inline">\n' +
' <input type="text" id="ciBookTime'+i+'" name="ciBookTime" class="layui-input laydate" lay-verify="ciBookTime" placeholder="yyyy-MM-dd hh:mm:ss" disabled="" >\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item" style="text-align: center ;margin-top: 10px">\n' +
' <a class="layui-btn UpdateBook " id="'+UpdateBook+'" style="margin-right:80px;margin-left: auto">修改</a>\n'+
' <button type="button" class="layui-btn SubmitBook" id="SubmitBook" style="margin-right:auto;margin-left: auto">保存</button>\n' +
' </div>\n' +
' </form>'
$("#loadForm").append(html)
//获取当前点击按钮所在的表格ID,并进行取值、数据格式化、数据传递
$(document).on('click','.SubmitBook',function(){
//获取当前所在from的ID
var fromId =$(this).closest("form").attr("id");
}