js在当前表格中点击按钮新增一行的操作

原创已于 2023-05-04 11:16:30 修改 · 6.8k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jsp #前端

于 2020-05-21 17:33:25 首次发布

日常开发记录专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JSP实现的动态表格案例，详细展示了如何通过JS动态添加和删除表格行，以及如何利用正则表达式更新元素ID以确保DOM元素唯一性。案例中包括了完整的JSP页面代码和JS操作逻辑。

1.JSP页面代码示例

<tr>
	<td colspan="6" style="text-align: left;">
		<table id="cpxnTable" class="table-form" >
			<thead>
				<tr>
					<th>序号</th> 
					<th>产品</th> 
					<th>品名</th> 
					<th>规格</th> 
					<th>生产工艺阶段</th> 
					<th>订单数量</th> 
					<th>已通知量</th> 
					<th>本次通知量</th> 
					<th>预计生产日期</th> 
					<th>预计交货日期</th> 
				</tr>
			</thead>
			<tbody id="productInformationTbody">
				<c:if test="${empty productInformationList}">
					<tr id="productInformation">
						<td><input id="xuHao"  name="xuHao" type="text" readonly="readonly" class="input-small"/></td>
						<td><input id="IBB003" name="IBB003" type="text" readonly="readonly" class="input-small"/></td>
						<td><input id="IBB004" name="IBB004" type="text" readonly="readonly" class="input-small"/></td>
						<td><input id="IBB041" name="IBB041" type="text" readonly="readonly" class="input-small"/></td>
						<td>
							<select id="selectProcessStage" class="select-medium required">
								<c:forEach items="${fns:getDictList('process_stage')}" var = "processStage">
									<option value="${processStage.value}">${processStage.label}</option>
								</c:forEach>
							</select>
						</td>
						<td><input id="IBB006" name="IBB006"  type="text" readonly="readonly" class="input-small"/></td>
						<td><input id="notice" name="notice"  type="text" readonly="readonly" class="input-small"/></td>
						<td><input id="volume" name="volume"  type="text" class="input-small" /></td>
						<td><input id="yjscDate" name="yjscDate" type="text"  maxlength="20" class="input-medium Wdate required" value="${fns:getDate('yyyy-MM-dd')}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/></td> 
						<td><input id="yyjhDate" name="yyjhDate" type="text"  maxlength="20" class="input-medium Wdate required" value="${fns:getDate('yyyy-MM-dd')}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/></td> 
					</tr>
				</c:if>
				<c:if test="${not empty productInformationList}"></c:if>
			</tbody>
		</table>
		<!-- 提供增加行功能-->
		<button  name="addIssueFile" type="button" class="btn btn-small btn-success" ><i class="icon-plus"></i></button>
		<button name="removeIssueFile" type="button" class="btn btn-small btn-success" ><i class="icon-minus"></i></button>
	</td>
</tr>

2.js操作部分

function addIssueFileRow() {
  $("button[name='addIssueFile']").on('click', function () {
	var i;//行记录计数器
	var counter = localStorage.getItem("productInformation_counter");
   if (!counter) {
	   i = $("input[name^='productInformation']").length;
	   localStorage.setItem("productInformation_counter", i);
	} else {
	  i = parseInt(counter);
	} 
	var reg  = new RegExp("xuHao", "g"); 			
	var reg2 = new RegExp("IBB003", "g"); 			
	var reg3  = new RegExp("IBB004", "g");  
	var reg4  = new RegExp("IBB041", "g");  		
	var reg5  = new RegExp("IBB006", "g");  		
	var reg6  = new RegExp("notice", "g");  		
	var reg7  = new RegExp("volume", "g"); 
	var reg8  = new RegExp("yjscDate", "g"); 
	var reg9  = new RegExp("yyjhDate", "g"); 
	var reg10  = new RegExp("productInformation", "g"); 
	var reg11  = new RegExp("selectProcessStage", "g"); 
	 
	var code = "<tr id=\"productInformation\">"
		+"<td>"
			+"<input id = \"xuHao\" name = \"xuHao\" type=\"text\" class=\"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id = \"IBB003\" name = \"IBB003\" type=\"text\" class = \"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id = \"IBB004\" name = \"IBB004\" type=\"text\" class=\"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id = \"IBB041\" name = \"IBB041\" type=\"text\" class = \"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<select id=\"selectProcessStage\" class=\"select-medium required\">"
				+"<c:forEach items="${fns:getDictList('process_stage')}" var = "processStage">"
					+"<option value=\"${processStage.value}\">${processStage.label}</option>"
				+"</c:forEach>"
			+"</select>"
		+"</td>"
		+"<td>"
			+"<input id = \"IBB006\" name = \"IBB006\" type=\"text\" class = \"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id = \"notice\" name = \"notice\" type=\"text\" class = \"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id = \"volume\" name = \"volume\" type=\"text\" class = \"input-small\"/>"
		+"</td>"
		+"<td>"
			+"<input id=\"yjscDate\" name=\"yjscDate\" type=\"text\" class=\"input-medium Wdate required\" value=\"${fns:getDate('yyyy-MM-dd')}\" οnclick=\"WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});\"/>"
		+"</td>"
		+"<td>"
			+"<input id=\"yyjhDate\" name=\"yyjhDate\" type=\"text\" class=\"input-medium Wdate required\" value=\"${fns:getDate('yyyy-MM-dd')}\" οnclick=\"WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});\"/>"
		+"</td>"
		+"</tr>";
	var code = code.replace(reg, "xuHao" + i ).replace(reg2,  "IBB003" + i ).replace(reg3, "IBB004" + i )
	.replace(reg4, "IBB041" + i ).replace(reg5, "IBB006" + i ).replace(reg6, "notice" + i ).replace(reg7, "volume" + i )
	.replace(reg8, "yjscDate" + i ).replace(reg9, "yyjhDate" + i ).replace(reg10, "productInformation" + i )
	.replace(reg11, "selectProcessStage" + i );
	$(this).prev().append(code);
	localStorage.setItem("productInformation_counter", ++i);
  })
}

3.点击删除按钮删除一行

//点击“-”号，删除行
function removeIssueFileRow() {
  $("button[name='removeIssueFile']").live('click', function () {
	  var lastLab = $("#cpxnTable tbody tr:last").attr('id');
	  if(lastLab != 'productInformation'){
		  $("#cpxnTable tbody tr:last").remove();
	  }else{
		/* 【当前没有可删除自增行】 */
		message = "<spring:message code='jsp.scProductionOrderSubject.t12'/>";
		top.$.jBox.tip(message, "info", {persistent: true, opacity: 0, timeout: 5000});
		return false; 
	  }
  })
}