getElementById()在动态分配的id上不起作用


getElementById( ) not working on Dynamically assigned id

我已经浏览了谷歌和一些SO问题(比如这个&这),但我没有找到解决方案。我正在努力验证表中动态生成的行,最初我试图验证第一个td,循环和警报工作都很好,但document.getElementById()给出了一个空值。脚本在页面的最底部。

,这里是JS代码。

编辑:我已经添加了代码,我要做的是显示错误(请填写),当字段在提交按钮的点击上留下空白,并在填充时隐藏它。

$(function(){
  $(document).on("click",".addRowAux",function(){
    /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val();
	var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val();
	var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val();
	var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/
	
	var countrow= $("#annextable tr").length;
	
		/*countrow++;*/
		if(countrow<11)
		{
		$("#aux").append('<tr><td align="center">'+countrow+'</td><td align="center"><input type="text" name="ref_name[]" id="ref_name"/><span id="refNm_error">Please fill</span></td><td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td><td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td><td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td><td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td><td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td><td align="center"><span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td></tr>');
		}
		else
		{
				//countrow--;
				alert("Can not add more then 10 record.");
		}
});
  
});
   $(document).on('click', '#removeRowaux', function () { // <-- changes 
    var countrow= $("#annextable tr").length;
	if(countrow>3)
	{
      $(this).closest('tr').remove();        
        var tblObj = document.getElementById('annextable'); 
        var no_of_rows = tblObj.rows.length; 
        for(var i=0; i<no_of_rows-1; i++) 
        {
        tblObj.rows[i+1].cells[0].innerHTML = i+1;
        tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1);
        
        ////alert(kj);
        //document.getElementById("refNm_error").id ="refNm_error"+j;
        }
	}
	else{
		alert("you can not delete this")
		}
 });
$(document).on('click', '#hods', function () {        
    var tblObj = document.getElementById('annextable'); 
        var no_of_rows = tblObj.rows.length; 
        for(var i=0; i<no_of_rows-1; i++) 
        {tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1)
        
        var j=tblObj.rows[i+1].cells[1].getAttribute("delThis");
        document.getElementById("refNm_error").id ="refNm_error"+j;
        }
       
   
});
  
$(function(){
	 $(document).on('change', '.rel_type', function() {
		 var relation = $(this).val();
		 if(relation =='OT'){
			 $(this).next("input").show();
			 $(this).next("input").val("Please Specify");
	 	 }
		else{
			$(this).next("input").hide();
			$(this).next("input").val("")
		}
	 });   
});

function yoVal(){
var refNm =document.getElementsByName('ref_name[]');   
for(var i=0;i<=refNm.length;i++) {
    if(refNm[i].value==""){
    alert("success");
}
    else{        
       var ch ='refNm_error'+(i+1);
       alert(ch);		
    //document.getElementById(ch).style.display = "none";
        alert("fail")
    }
    
}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="refForm">
                    <table width="99%" border="1"  id="annextable" style="border-collapse:collapse" align="center">
                <thead>
                  <tr style="background:#ddd;">
                    <th>S.No</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Address</th>                   
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>PAN</th>
					<th>Action</th>
                    </tr>
                </thead>
                 <tbody id="aux">
				  <tr>
                    <td align="center">1</td>
                    <td align="center"><input type="text" name="ref_name[]" id="ref_name"/><br/><span id="refNm_error">Please fill</span></td>
                    <td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td>
				    <td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td>
					<td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td>
                    <td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td>
                    <td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td>
                    <td align="center">
					<span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td>
                  </tr>  
				              
                </tbody></table>
                        <input type="button" onclick="yoVal()" value="Test" id="hods"/>
                    </div>

因为您在变量k的开头和结尾添加了额外的引号,所以使用:

 var k = 'refNm_error' + (i+1);

您可能需要在添加动态元素后重新加载DOM。

此链接可能有帮助

更新,当您为表创建动态表行时,您没有为input元素分配唯一的ids。所以我更新了addRow处理程序:

$(document).on("click", ".addRowAux", function () { 

添加唯一的input ids,如下:

$("#aux").append('<tr><td align="center">' + countrow + '</td><td align="center"><input type="text" name="ref_name[]" id="ref_name_' + countrow + '"/><span id="refNm_error_' + countrow + '">Please fill</span>...

,我还在代码中更改了:

<span id="removeRowaux">Remove</span>

使用class代替id:

<span class="removeRowaux">Remove</span>

现在remove行处理程序监听来自类removeRowaux的事件:

 $(document).on('click', '.removeRowaux', function ()

现在删除行功能工作了,没有相同的ids的span。所以我不认为getElementById()在代码中有任何问题-它工作得很好:-)

更新小提琴

元素的id必须是唯一的!所以尝试使用唯一的id输入(ref_name_1,ref_name_2,…)和唯一的id跨度(refNm_error_1, refNm_error_2,…)或只需使用class (class="ref_name"或类="refNm_error"然后像这样找到它们:

$('.ref_name').each(function(){
if($(this).val() == ""){
$(this).next('span').html("none");
}