使用js中template方式添加表单中表格行并提交表单

小咪咪 2023-06-23 11:56 9阅读 0赞

## 在js里面，经常需要使用js往页面中插入html内容，常用append方法 ##

$('#div1').append('<div>你好</div>')

如果内容过多的话会拼接繁杂，不方便编码，也有局限性。

## template简单使用 ##

<script type='text/template' id=" templateChild ">较为方便
    	var templateChild = $($("#templateChild").html()).clone();
    	$("#childEnterprisesTbody").append($(templateChild));

如果是添加表单中表格一些数据势必会需要提交数据，如：project\[0\].name,project\[0\].id,project\[1\].name,project\[1\].id等表格新增行就会遇到下标是几的问题，这里需要格式化新增行input中name=“project\[0\].id”的下标。

## 解决方法如下： ##

模板上我们给下标为?符号，我们添加行的时候通过js排序并替换?为正确下标1、2、3…

<script type="text/template" id="templateChild">
    <tr style="text-align: center;">
    	<td>
    		
    		<input type="hidden" name="subsidiaryCompany[?].businessId" value="${enterprise.mainEnterpriseId}" />
    		<input type="text" name="subsidiaryCompany[?].name" value="${business.name}" required maxlength="200" lay-verify="required" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
    	</td>
    	<td align="center">
    		<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="delChild(this)">删除</button>
    	</td>
    </tr>
    </script>

## 表格数据加载实例 ##

<button type="button" class="layui-btn layui-btn-xs layui-btn-normal f-right" onclick="addChild()">添加</button>
    <table class="layui-table f-table-fixed small" lay-size="sm">
    					<colgroup>
    						<col width="300">
    						<col width="100">
    					</colgroup>
    					<thead>
    						<tr>
    							<th>名称</th>
    							<th>操作</th>
    						</tr>
    					</thead>
    					
    						<tbody class="f-p-n" id="childEnterprisesTbody">
    							
    								<c:forEach items="${subsidiaryCompany }" var="business" varStatus="i">
    									<tr style="text-align: center;">
    										<td>
    											<input type="hidden" name="subsidiaryCompany[${i.index}].id" value="${business.id}" />
    											<input type="hidden" name="subsidiaryCompany[${i.index}].businessId" value="${business.businessId}" />
    											<input type="text" name="subsidiaryCompany[${i.index}].name" value="${business.name}" required maxlength="200" lay-verify="required" placeholder="请输入公司名称" autocomplete="off" class="layui-input">
    										</td>
    										<td align="center">
    											<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="delChild(this)">删除</button>
    										</td>
    									</tr> 
    								</c:forEach>
    							
    						</tbody>
    					
    				</table>

Js代码

//添加子公司
    function addChild() {
    	var templateChild = $($("#templateChild").html()).clone();
    	$("#childEnterprisesTbody").append($(templateChild));
    	
    	orderChild();
    }
    /**
     * 排序子公司
     */
    function orderChild() {
    	$("#childEnterprisesTbody").find("tr").each(function(i) {
    		$(this).find("[name^='subsidiaryCompany']").each(function(j) {
    			var nameStr = $(this).attr("name");
    			var newName = nameStr.replace(/\?|\d+/, i);
    			$(this).attr("name", newName);
    		});
    	});
    }
    //删除子公司
    function delChild(_this) {
    	$(_this).parent().parent().remove();
    	orderChild();
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS提交表单form

<table class="table table-striped table-sm"> <tbody> <tr th:each=...

红太狼/ 2024年04月17日 22:32/ 0 赞/ 95 阅读

相关使用js中template方式添加表单中表格行并提交表单

在js里面，经常需要使用js往页面中插入html内容，常用append方法 $('div1').append('<div>你好</div>') 如果内容过多的话

小咪咪/ 2023年06月23日 11:56/ 0 赞/ 10 阅读

相关 js表单提交数据并进行验证

表单提交数据并进行验证模拟注册填写信息 html页面 <!DOCTYPE html> <html> <head> <meta ch

落日映苍穹つ/ 2023年01月09日 12:37/ 0 赞/ 171 阅读

相关 jquery.form.js 使用ajax方式提交表单

引入jquery文件 <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

àì夳堔傛蜴生んèń/ 2022年12月07日 15:08/ 0 赞/ 216 阅读

相关 java web 表单提交_JavaWeb学习日记----表单提交方式

1.表单提交方式 (1) 使用input控件中的submit提交代码如下： Title用户：密码：结果： ![b7adcc2965a8bbbfc71ccb4

客官°小女子只卖身不卖艺/ 2022年11月02日 11:56/ 0 赞/ 326 阅读

相关 html表单赋值提交,js 提交表单与表单赋值实例代码

例子，javascript代码实现提交表单与赋值操作。复制代码代码示例: " value=". . ." class="btnLook" style="" onClic

电玩女神/ 2022年10月09日 02:33/ 0 赞/ 283 阅读

相关 js提交表单

有时需要通过 js 创建表单进行代码提交，例如文件下载等情况 var form1 = document.createElement("form"); form1.id

忘是亡心i/ 2022年08月21日 06:44/ 0 赞/ 236 阅读

相关 JS回车提交表单

JavaScript实现方法 document.onkeydown = function(e) { if (!e) e

柔光的暖阳◎/ 2022年08月03日 14:42/ 0 赞/ 243 阅读

相关 JavaScript.表单提交方式

表单提交方式 \使用submit提交 <form> ….. <input type=”submit” /> </form> \使用button提交表单

ゝ一纸荒年。/ 2022年06月04日 04:41/ 0 赞/ 254 阅读

相关 form表单提交方式

form表单提交方式无刷新页面提交表单表单可实现无刷新页面提交，无需页面跳转，如下，通过一个隐藏的iframe实现，form表单的target设置为iframe

ゞ浴缸里的玫瑰/ 2022年05月25日 08:52/ 0 赞/ 292 阅读