我已經通過谷歌和一些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> <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> <span id="removeRowaux">Remove</span></td>
</tr>
\t \t \t \t
</tbody></table>
<input type="button" onclick="yoVal()" value="Test" id="hods"/>
</div>
可以告訴你你的HTML – ddw147
爲什麼downvote?我可否知道原因,將來會對我有所幫助。謝謝。 – 3ncrypter