js动态的往表格中加入表单元素
效果如图：
这里我用的是layui的静态表格，其他框架也是一样的（只要你都表单元素要通过js进行渲染），我的需求是在表单中放了表格的元素，表格中还有表单的元素。表格中的行数据是js动态添加的，正常的添加直接拼接进去就可以了效果就能出来，因为我是放到表单里边的，所以最后还要在js代码后边引入一次form表单的渲染；奇怪的渲染之后还没有生效，想了一下应该是在表单进行渲染的时候js还没有去添加行数据，所以没有渲染到，然后手动渲染了一下。果然，效果出来了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="js/jquery-3.3.1.js"></script>
<script type="application/javascript" src="layui/layui.js"></script>
</head>
<body>
<form class="layui-form">
<div>
<table id="principleDetail" class="layui-table" lay-size="sm">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody id="info">
</tbody>
</table>
</div>
</form>
</body>
<script>
//如果这里的数据是通过后台传过来的，记得手动渲染下
var index = 1;
$('#info').append("<tr id=" + index + "><td align='center'>" + "七月七的雪" + "<td align='center'><select><option value=''>请选择</option></select></td> <td><input type='text'></td></tr>");
layui.use('form',function () {
var form = layui.form;
//手动渲染
form.render();
})
</script>
</html>
