效果如图：

　　这里我用的是layui的静态表格，其他框架也是一样的（只要你都表单元素要通过js进行渲染），我的需求是在表单中放了表格的元素，表格中还有表单的元素。表格中的行数据是js动态添加的，正常的添加直接拼接进去就可以了效果就能出来，因为我是放到表单里边的，所以最后还要在js代码后边引入一次form表单的渲染；奇怪的渲染之后还没有生效，想了一下应该是在表单进行渲染的时候js还没有去添加行数据，所以没有渲染到，然后手动渲染了一下。果然，效果出来了。

　　

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8" />
  6. 		<title></title>
  7. 		<link rel="stylesheet" href="layui/css/layui.css" />
  8. 		<script src="js/jquery-3.3.1.js"></script>
  9. 		<script type="application/javascript" src="layui/layui.js"></script>
  10. 	</head>
  11.  
  12. 	<body>
  13. 		<form class="layui-form">
  14. 			<div>
  15. 				<table id="principleDetail" class="layui-table" lay-size="sm">
  16. 				  <colgroup>
  17. 				    <col width="150">
  18. 				    <col width="200">
  19. 				    <col>
  20. 				  </colgroup>
  21. 				  <thead>
  22. 				    <tr>
  23. 				      <th>昵称</th>
  24. 				      <th>加入时间</th>
  25. 				      <th>签名</th>
  26. 				    </tr>
  27. 				  </thead>
  28. 				  <tbody id="info">
  29.  
  30. 				  </tbody>
  31. 				</table>
  32. 			</div>
  33.  
  34. 		</form>
  35.  
  36. 	</body>
  37. 	<script>
  38. 		//如果这里的数据是通过后台传过来的，记得手动渲染下
  39. 		var index = 1;
  40. 		$('#info').append("<tr id=" + index + "><td align='center'>" + "七月七的雪" +  "<td align='center'><select><option value=''>请选择</option></select></td> <td><input type='text'></td></tr>");
  41. 		layui.use('form',function () {
  42. 			var form = layui.form;
    　　　　　　　　　　　　　　　　//手动渲染
    　　　　　　　　　　　　　　form.render();
  43. 		})
  44. 	</script>
  45. </html>

　　

js动态的往表格中加入表单元素的更多相关文章

  1. 详解HTML中的表单元素

    代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. 关于struts中的表单元素- Form bean not specified on mapping for action: "helloa.do"报错

    今天测试struts时仿照书上写了一个小的表单提交代码 <html:form action="helloa.do" method="post"> & ...

  3. React中的表单元素

    在web应用开发当中,表单还是很重要的元素. 应用表单组件有:文本框(input.textarea).单选按钮和复选框.Select组件. 文本框:文本框的状态改变即文本框中的内容的改变.此时的sta ...

  4. JQuery中根据表单元素动态拼接json 字符串

    // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  5. JavaScript中的表单编程

    表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...

  6. layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

  7. 表单元素（控件）不可见，你用visibility还是display？(转)

    属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下v ...

  8. angular 表单元素的使用总结

    工作中form表单元素最常用的是input,问题没有太多,现在总结下select ,radio组,checkbox的使用 1 select 常用的使用方式,如下 var Cityis = [{id:0 ...

  9. (四) HTML之表单元素

    HTML中的表单元素,是构成动态网页的重要组成部分,因此,熟知表单元素是十分重要的.下面将根据表单中的一些常用标签进行介绍 1.单选按钮 <input type="radio" ...

随机推荐

  1. Python 清华镜像设置

    大家在通过pip 或conda 下载一些很大的第三方库时是不是有一种等到坟头的草都三尺高了,还没下载完的感觉,而且大的第三方库长时间下载,可能会导致超时自动中断下载,感谢清华的大佬们 临时使用: pi ...

  2. SQL ------ JDBC 删除指定的某条记录

    package demo; import java.io.IOException; import java.sql.Connection; import java.sql.DriverManager; ...

  3. [转帖]12条用于Linux的MySQL/MariaDB安全最佳实践

    12条用于Linux的MySQL/MariaDB安全最佳实践 2018-01-04 11:05:56作者:凉凉_,soaring稿源:开源中国社区 https://ywnz.com/linuxysjk ...

  4. 链表操作Java实现

    单链表 存储结构 public class ListNode { int i; ListNode next; ListNode(int i) { this.i = i; } public String ...

  5. Luogu P2495 [SDOI2011]消耗战

    题目 我们可以很快的想到一个单次\(O(n)\)的dp. 然后我们注意到这个dp有很多无用的操作,比如一条没有关键点的链可以直接去掉. 所以我们可以尝试一次dp中只管那些有用的点. 题目给的关键点显然 ...

  6. 老贾的幸福生活day 04

    变量 变量名的规则: 变量名由字母,数字,下划线组成 变量名不能以数字开头 变量名要具有可描述性 变量名要区分大小写 变量名禁止使用python关键字 变量名不能使用中文和拼音 变量名推荐写法: 驼峰 ...

  7. tr、od命令

    一.tr:替换或删除字符 语法:       tr [OPTION] ... SET1 [SET2] 描述       翻译,压缩和/或删除标准输入中的字符,可写吗?       到标准输出. -c, ...

  8. Django初步完成：登录、注册、退出

    python环境:python2.7 开发工具:pycharm 项目名称:mysite5 app名称:online settings:映射app路径 INSTALLED_APPS = [ 'djang ...

  9. Visual Studio高分屏下Winform界面变形

    现在高分屏的电脑越来越多,2K屏,4K屏层出不穷,对于.net开发人员来说,尤其是Winform开发者, 分辨率一直是个比较头疼的事情,屏幕分辨率高了,如果仍然设置显示100%,会导致字体非常小,影响 ...

  10. loj 2759「JOI 2014 Final」飞天鼠

    loj 这题有在一棵树上上升或者下降的操作,稍加分析后可以发现上升操作如果不是一定要做(指高度不足以到下一棵树或者是最后到达\(n\))就不做,下降操作也是如果不是一定要做(指到达下一棵树时高度过高) ...