效果如图:
这里我用的是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>