效果如图：

　　这里我用的是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>

　　

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. idea-eclipse快捷键对比

      分类 功能点 Eclipse快捷键 IDEA快捷键 搜索 搜索文本 Ctrl + F Ctrl + F Ctrl + R 查找替换 Alt + P/A 逐个/全部替换 Alt + F3 查找当前选 ...

  2. ActionScript的for循环

    actionscript支持的for循环有三种形式: 1.for(初始值;条件;递增) 例如: for(var x:int=1;x<=10;x++) trace(x); trace()会把结果输 ...

  3. 四、VSCode调试vue项目

    1.先决条件设置 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 在可以从 VS Code 调试你 ...

  4. SpringCloud简历模板

    项目三:智慧生鲜(SpringCloud) 开发周期:5个月项目介绍:该项目是一个基于微服分布式的生鲜电商网站,主要模块有前台:用户模块.商品模块.购物车模块.订单模块.支付模块.抢购模块.后台:权限 ...

  5. thinkPHP 出现route不起作用提示No input file specified.

    修改.htaccess文件 原因在于使用的PHP是fast_cgi模式,而在某些情况下,不能正确识别path_info所造成的错误. 打开.htaccess 在RewriteRule 后面的index ...

  6. Python动态地声明变量赋值

    通过exec().globals()和locals() # 通过exec() for i in range(1, 4): # 第一次循环 i=1 时,会执行字符串中的python语句 ex1 = &q ...

  7. 项目使用Hbase进行数据快速查询的代码案例

    之前项目中对于数据详情的查询使用的ddb技术,由于成本过高,现考虑使用开源的hbase框架,借此机会进行hbase的代码案例记录,之前已经对 hbase的原理进行介绍,介绍了hbase中的rowkey ...

  8. P2709 小B的询问 【普通莫队】

    这是我的莫队入门题,我也了解到了莫队分为普通莫队以及带修莫队.顾名思义,普通莫队不需要修改区间的值,而带修莫队处理区间的值会修改的查询. 能用莫队的前提条件: 1.在知道 [l, r]中信息时,可以在 ...

  9. 计蒜客习题：蒜头君的积木 （状压DP 枚举子集）

    问题描述 蒜头君酷爱搭积木,他用积木搭了 n 辆重量为 wi的小车和一艘最大载重量为 W 的小船,他想用这艘小船将 n 辆小车运输过河.每次小船运载的小车重量不能超过 W.另外,小船在运载小车时,每辆 ...

  10. 架构设计之CAP定理

    一.什么是 CAP? 「 CAP定理 」又被称为 布鲁尔定理,它提出对于一个分布式系统而言,不能同时满足以下三点: Consisteny(一致性) Availability(可用性) Partitio ...