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 = ""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
				+"{fns:getDictList('process_stage')}" var = "processStage">"
					+"${processStage.label}"
				+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+""
			+""
		+""
		+"";
	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 = "";
		top.$.jBox.tip(message, "info", {persistent: true, opacity: 0, timeout: 5000});
		return false; 
	  }
  })
}