我已经通过谷歌和一些SO问题(如this和this),以及但我没有找到解决方案。我正在为一个表中的动态生成的行的验证工作,最初我试图验证第一个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> <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")
}
}}
个字符
4条答案
按热度按时间deyfvvtc1#
因为您在变量k的开头和结尾添加了额外的引号。用途:
字符串
bybem2ql2#
在添加动态元素后,您可能需要重新加载DOM。
This link might help
ehxuflar3#
更新,当你为表创建动态表行时,你没有为
input
元素分配唯一的ids。所以我更新了addRow处理程序:字符串
添加唯一的
input
ids,如下所示:型
我还修改了代码
型
使用
class
而不是id
:型
现在,remove row处理程序监听来自具有类
removeRowaux
的span的事件:型
现在删除行功能工作了,并且没有相同ids的span。所以我不认为代码中的
getElementById()
有什么问题-它工作得很好:-)更新Fiddle
ct2axkht4#
新生成的或动态生成的元素的id应该是唯一的!所以尝试对输入使用唯一id(ref_name_1,ref_name_2,...),对跨度使用唯一id(refNm_error_1,refNm_error_2,...),或者简单地使用class(class=“ref_name”or class=“refNm_error”)代替id,然后以如下方式找到它们:
字符串