通过layer弹出层获取数据，渲染到页面里表格中

通过layer弹出层获取数据，渲染到页面里表格中
效果如下图

html部分

<!-- 填写用户信息弹窗模板 -->
	<script type="text/html" id="modal">
			<div id="popup-userInfo" style="overflow: hidden;">
				<div class="m_item">
					<span class="require" style="width: 10%;">学号</span>
					<input type="text" class="form-item" data-name="student_no" />
					<span style="width: 20%;">(请填写1-50字)</span>
				</div>
				<div class="m_item">
					<span class="require" style="width: 10%;">姓名</span>
					<input type="text" class="form-item" data-name="name" />
					<span style="width: 20%;">(请填写2-5字)</span>
				</div>
				<div class="m_item">
					<span class="require" style="width: 10%;">手机号</span>
					<input type="text" class="form-item" data-name="mobile" />
					<span style="width: 20%;">(请填写11字)</span>
				</div>
				<div class="m_item ">
					<span class="require" style="width: 10%;">学院</span>
					<select class="form-item" data-name="collage">
						<option value ="理学院">理学院</option>
						<option value ="管理学院">管理学院</option>
						<option value="计算机科学与技术">计算机科学与技术</option>
					</select>
				</div>
				<div class="m_item ">
					<span class="require" style="width: 10%;">专业</span>
					<select class="form-item" data-name="major" >
						<option value ="理学院">理学院</option>
						<option value ="管理学院">管理学院</option>
						<option value="计算机科学与技术">计算机科学与技术</option>
					</select>
				</div>
				<div class="m_item">
					<span class="require" style="width: 10%;">年级</span>
					<input type="text" class="form-item" data-name="grade" />
				</div>
				<div class="m_item">
					<span class="require" style="width: 10%;">邮箱</span>
					<input type="text" class="form-item" data-name="email" />
				</div>
			</div>
	</script>

	<!-- 用户信息行模板 -->
	<script type="text/html" id="tpl-people">
		<tr>
			<td><%= name %></td>
			<td><%= student_no %></td>
			<td><%= mobile %></td>
			<td><%= collage %></td>
			<td><%= major %></td>
			<td><%= grade %></td>
			<td><%= email %></td>
		</tr>
	</script>

js部分

$(".add").click(function() {
				layer.open({
					type: 1,
					btn: ['保存'],
					btnAlign: 'c',
					success: function () {
						addSelectEvent()
					},
					yes: function(index, layero) {
						// 保存填写的用户信息
						if (!$('.tHead').length) {
							setTHead()
						}
						$(".myadd").before(getPeopleItem(getPeopleData()))
						layer.close(index);
					},
					title: ['审核成员', 'font-size:1rem;'],
					area: ['60rem', '40rem'],
					scrollbar: false,
					content: $('#modal').html() //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
			})
			

			/**
			 * 给表格添加表头
			 */
			function setTHead() {
				$('.joiner tbody').prepend(
					'<tr class="tHead">' +
					'<td>姓名</td>' +
					'<td>学号</td>' +
					'<td>手机号</td>' +
					'<td>学院</td>' +
					'<td>专业</td>' +
					'<td>年级</td>' +
					'<td>邮箱</td>' +
					'</tr>')
			}

			/**
			 * @param {Object} peopleData 填写的用户数据
			 */
			function getPeopleItem(peopleData) {
				return Template.render($('#tpl-people').html(), peopleData);
			}
			/**
			 * 获取填写用户数据
			 */
			function getPeopleData() {
				var result = {}
				$('#popup-userInfo .form-item').each(function () {
					result[this.dataset.name] = this.value 
				})
				return result
			}

css部分就懒得粘了 自己想要什么样的自己写就好:D