需求概要
在父页面会员列表点击【添加】操作，弹出iFrame弹层，包含输入input各项信息的表单，编辑完成提交后，将表单中input的value值传递给父页面，并且在父页面会员列表table中无刷新添加一行表格<tr>，模拟后台数据的提交与接收。
参考资料
主要依赖参考：1
2
3
4
5
6//给父页面传值
$('#transmit').on('click', function(){
parent.$('#parentIframe').text('我被改变了');
parent.layer.tips('Look here', '#parentIframe', {time: 5000});
parent.layer.close(index);
});
优化实现方法
frame页面确定增加时，触发给父页面传值事件。结合jQuery查询到父页面table的ID，将form表单提交的field值插入到父页面table结尾。以下示例代码，删除部分不需要内容：
主要HTML代码
1 | <!--父页面添加按钮操作--> |
主要JavaScript代码
1 | <script> |
给父页面赋值后再添加的实现方法
根据自己的实际需求选择合适的实现方法最好，个人在此项实现场景中不推荐此方法，因为此项目中父页面对应多个frame子页面，每个frame子页面对应的代码写在自己页面内部，感觉可能代码会更规整一些。
实现思路：
在父页面创建一个隐藏的form表单用来接收frame子页面的传值，在父页面创建一个addMember()函数来在table尾部插入一组新数据；在iframe子页面编辑完成触发事件时，给父页面隐藏表单传值，然后执行父页面的addMember()函数。
增加HTML主要代码
在以上实现方法基础上，新增隐藏form表单1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42<!--列表页增加form表单，接收add页面传过来的值，模拟后台提交与接收-->
<form class="layui-form" id="modalForm" style="display: none;">
<div class="layui-form-item">
<label for="L_username" class="layui-form-label">
<span class="we-red">*</span>登录名
</label>
<div class="layui-input-inline">
<input type="text" id="L_username" name="username" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_sex" class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" id="L_sex" name="sex" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_email" class="layui-form-label">
<span class="we-red">*</span>手机
</label>
<div class="layui-input-inline">
<input type="text" id="L_phone" name="phone" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_email" class="layui-form-label">
<span class="we-red">*</span>邮箱
</label>
<div class="layui-input-inline">
<input type="text" id="L_email" name="email" lass="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="L_pass" class="layui-form-label">
<span class="we-red">*</span>密码
</label>
<div class="layui-input-inline">
<input type="password" id="L_pass" name="pass" class="layui-input">
</div>
</div>
</form>
增加JavaScript代码
1 | //父页面创建addMember()函数 |
