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

最新推荐文章于 2022-07-15 13:51:47 发布

原创最新推荐文章于 2022-07-15 13:51:47 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

技术集锦同时被 2 个专栏收录

38 篇文章

订阅专栏

js相关技术资料信息

12 篇文章

订阅专栏

这篇博客介绍了如何使用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>