2015-09-28 102 views
1

我已經通過谷歌和一些SO問題(如this & this)以及但我沒有找到解決方案。 我正在驗證表中的動態生成的行,最初我想驗證第一個TD,循環和警報工作都很好,但document.getElementById()給出一個空值。該腳本位於頁面的最底部。getElementById()不工作動態分配的ID

這裏是JS代碼。

編輯:我已經添加了代碼,我試圖做的是顯示錯誤(請填寫)字段留空時點擊提交按鈕,並在填充時將其隱藏。

$(function(){ 
 
    $(document).on("click",".addRowAux",function(){ 
 
    /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val(); 
 
\t var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val(); 
 
\t var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val(); 
 
\t var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/ 
 
\t 
 
\t var countrow= $("#annextable tr").length; 
 
\t 
 
\t \t /*countrow++;*/ 
 
\t \t if(countrow<11) 
 
\t \t { 
 
\t \t $("#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>'); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t \t //countrow--; 
 
\t \t \t \t alert("Can not add more then 10 record."); 
 
\t \t } 
 
}); 
 
    
 
}); 
 
    $(document).on('click', '#removeRowaux', function() { // <-- changes 
 
    var countrow= $("#annextable tr").length; 
 
\t if(countrow>3) 
 
\t { 
 
     $(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; 
 
     } 
 
\t } 
 
\t else{ 
 
\t \t alert("you can not delete this") 
 
\t \t } 
 
}); 
 
$(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(){ 
 
\t $(document).on('change', '.rel_type', function() { 
 
\t \t var relation = $(this).val(); 
 
\t \t if(relation =='OT'){ 
 
\t \t \t $(this).next("input").show(); 
 
\t \t \t $(this).next("input").val("Please Specify"); 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $(this).next("input").hide(); 
 
\t \t \t $(this).next("input").val("") 
 
\t \t } 
 
\t }); 
 
}); 
 

 

 

 

 
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); \t \t 
 
    //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> 
 
\t \t \t \t \t <th>Action</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody id="aux"> 
 
\t \t \t \t <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> 
 
\t \t \t \t  <td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td> 
 
        </tr> 
 
\t \t \t \t    
 
       </tbody></table> 
 
         <input type="button" onclick="yoVal()" value="Test" id="hods"/> 
 
        </div>

+0

可以告訴你你的HTML – ddw147

+1

爲什麼downvote?我可否知道原因,將來會對我有所幫助。謝謝。 – 3ncrypter

回答

1

因爲要添加在開頭和結尾的變量k額外的引號。使用:

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

感謝您的回覆,我試着最初不使用引號,但它沒有工作,這就是爲什麼我加了引號。 :) – 3ncrypter

+1

@TheCode:你可以分享代碼 –

+0

@MilindAnandtwar添加了代碼 – 3ncrypter

0

更新,當您創建動態錶行的表你沒有指定唯一ID S表示input元素。所以,我更新了addRow處理程序:

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

添加獨特inputID S,像以下:

$("#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> 

現在刪除行處理程序偵聽來自跨度事件與removeRowaux類:

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

現在刪除行功能的作品,並有具有相同ID沒什麼跨度。所以,我不認爲有什麼不妥getElementById()代碼 - 它工作正常:-)

更新Fiddle