js动态表格及获取每一个文本框的动态id属性

这篇博客介绍了如何使用JavaScript动态创建表格行,并在表格中添加输入框,同时展示了如何为每个输入框设置独特的ID属性。此外,还讲解了如何监听输入框的点击事件并根据ID执行相应操作,如删除行、获取ID等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/****动态的增加行****/
	function nextRow(){
		 var productIndexObj = document.getElementById('productIndex');
		 var productTbl = document.getElementById('productTbl');
		 var productIndex = parseInt(productIndexObj.value) + 1;
		 productIndexObj.value = productIndex;
		 
		 newRow = productTbl.insertRow(-1);
		 
		 indexCell = newRow.insertCell(0);
		 indexCell.className = "TableTd";
		 indexCell.innerHTML = "第"+productIndex+"级:";
		 
		 noCell = newRow.insertCell(1);
		 noCell.className = "TableTd";
		 noCell.innerHTML = "<input name='tableLevel' type='text'  class='inputtxt' autocomplete='off' id='productNo_"+productIndex+"' onChange='autoproduct("+productIndex+")' />";
		 
		 costCell = newRow.insertCell(2);
		 costCell.className = "TableTd";
		 costCell.innerHTML = "<input name='btn' type='button' class='button' id='doDel"+productIndex+"' value = '删除级别' />";
	 }

/**删除当前行**/
     function toDel(){   
    	   document.all.productTbl.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
	   document.getElementById('productIndex').value = parseInt(document.getElementById('productIndex').value - 1);
     }
/***获取文本框的id属性***/
	 function getInput_ID(){		
		 var inputs = document.getElementsByTagName("input");		
		 for(var i = 0, len = inputs.length; i < len; i++){			
			 (function(index){				
				 inputs[index].onclick = function(){					
					 if('doAddBtn' != this.id && 'doBackBtn' != this.id && 'doNextBtn' != this.id && 'doDel' != this.id.substr(0,5)){
						 treeDialog(this.id);
					 }
					 if('doBackBtn' == this.id){
						 goBack();
					 }
					 if('doAddBtn' == this.id){
						 nextRow();
						 getInput_ID();
					 }
					 if('doNextBtn' == this.id){
						 toNextStep();
					 }
					 if('doDel' == this.id.substr(0,5)){
						 toDel();
					 }				
				  }			
			  })(i)		
		  }	
      }	
     window.onload = function(){		getInput_ID();	}
备注:js判断字符串相等的时候用双引号""==XX不行必须用 ''==XX, 等号即 “==” 而非“ = ” 。

<table id="propTab" height="100%" valign="top" width="100%" border="0" cellspacing="0" cellpadding="0" bordercolorlight="#D4D4D4">
			<tr valign="top">
				<td valign="top">

				<table id="propTabinner" valign="top" width="100%" border="0"
					cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
					<tr>
						<td colspan="2">  <input type="hidden" id="PROP_ID"
							name="PROP_ID"></td>
					</tr>
					<tr>
						<td align="right" width="40%">联合表名称:</td>
						<td width="50%">
							<input id="PROP_NAME" type="text" class="inputtxt" name="PROP_NAME" /> 
							<font color="#FF0000"> *</font>
						</td>
						<td width="10%"></td>
					</tr>
					<tr>
						<td align="right">第1级:</td>
						<td>
							<input id="tableLevelOne" type="text" onclick="treeDialog();" class="inputtxt" name="tableLevel" readonly="readonly" /> 
							<font color="#FF0000"> *</font>
						</td>
						<td width="10%"></td>
					</tr>
					<tr>
						<td align="right">第2级:</td>
						<td>
							<input id="tableLevelTwo" type="text" onclick="treeDialog();" class="inputtxt" name="tableLevel" readonly="readonly" /> 
							<font color="#FF0000"> *</font>
						</td>
						<td width="10%"></td>
					</tr>
					<tr id = "levelThree">
						<td colspan="3">
							<table name="productTbl" id="productTbl" style="padding-left:50%;" border="0" cellpadding="1" cellspacing="0" align="center">
									<tr>
        								<td width="30" name="productIndex" id="productIndex" type="hidden" value="2" colspan="3"></td>
        							</tr>
							 </table>
						</td>
					</tr>

					<tr id="tr_button2">
						<td colspan="2" align="center" style="padding-top: 10px;">
							<INPUT type="button" id="doAddBtn"  class="button" style="float: left;margin-left: 650%;"  name="btn_newProp" value="添加级别" />  
							<INPUT type="button" id="doBackBtn" class="button" name="btn_newProp" value="返    回" />  
							<INPUT type="button" id="doNextBtn" class="button" name="btn_newProp" value="下 一 步" />
						</td>
					</tr>

				</table>

				</td>
			</tr>
		</table>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值