Javascript 如何随机验证动态行
我有一个动态的行创建、删除和验证。对于创建和删除行，它可以正常工作。假设我正在删除第一行，该行之后的内容无法验证。如果我没有删除第一行，我可以验证剩余的行。如果要删除任何中间行，则该行之后的内容将无法验证Javascript 如何随机验证动态行,javascript,html,html-table,cell,Javascript,Html,Html Table,Cell,我有一个动态的行创建、删除和验证。对于创建和删除行，它可以正常工作。假设我正在删除第一行，该行之后的内容无法验证。如果我没有删除第一行，我可以验证剩余的行。如果要删除任何中间行，则该行之后的内容将无法验证 <head> <title>Insert title here</title> </head> <body> <TD> <FORM NAME="iForm"> <INPUT type="HIDDEN"
<head>
<title>Insert title here</title>
</head>
<body>
<TD>
<FORM NAME="iForm">
<INPUT type="HIDDEN" name="_row_count" id="_row_count" value="0" />
<INPUT type="HIDDEN" name="rowcount" id="rowcount" value="0" />
<P>
<INPUT type="button" value="Add Rows" onclick="addRowToTable();" />
</P>
<TABLE width='100%' border='1' id="CommTble">
<TR>
<TH CLASS='vrTableHeader' align='left'> Feild1 </TH>
<TH CLASS='vrTableHeader' align='left'>Feild2 </TH>
<TH CLASS='vrTableHeader' align='left'>Remove Field </TH>
</TR>
<TR>
<TD>
<INPUT TYPE='TEXT' CLASS='vrFormText' NAME='field' id='field10' SIZE=15 MAXLENGTH="25" />
</TD>
<TD>
<INPUT TYPE='TEXT' CLASS='vrFormText' NAME='field' id='field20' SIZE=15 MAXLENGTH="25">
</TD>
<TD>
<INPUT TYPE='button' CLASS='vrFormText' NAME='DelButton_0' VALUE='Remove Row' SIZE=20 MAXLENGTH="18" ONCLICK="removeRowFromTable1(this,0);"/>
</TD>
</TR>
</TABLE>
<P>
<input type="button" class="submitest" value=" Save Record " name="Submit1" onclick="checkCommodity()">
<INPUT TYPE="RESET" NAME="Reset" CLASS="submitreset" VALUE="Reset">
</P>
</FORM>
</TD>
</body>
function addRowToTable()
{
var tbl = document.getElementById('CommTble');
var lastRow = tbl.rows.length;
var iteration = lastRow-1;
lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellTwo = row.insertCell(0);
var e2 = document.createElement('input');
e2.type = 'text';
e2.name = 'field1'+ iteration;
e2.id = 'field1'+ iteration;
e2.size = '15';
e2.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e2);
var cellTwo = row.insertCell(1);
var e3 = document.createElement('input');
e3.type = 'text';
e3.name = 'field2'+ iteration;
e3.id = 'field2'+ iteration;
e3.size = '15';
e3.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e3);
var cellNine = row.insertCell(2);
var e9 = document.createElement('input');
e9.type='button';
e9.name='DelButton_'+iteration;
e9.id='DelButton_'+iteration;
e9.value='Remove Row';
e9.size='20';
e9.onclick=function(){return deleteRow(this.parentNode.parentNode.rowIndex)};
cellNine.appendChild(e9);
iForm._row_count.value=iteration;
iteration+=1;
}
function deleteRow(i)
{
document.getElementById('CommTble').deleteRow(i);
}
function checkCommodity()
{
var tble = document.getElementById('CommTble');
var LastRow = tble.rows.length-1;
var rcount=0;
for(var i=0;i<LastRow;i++)
{
var a=document.getElementById('field1'+i).value;
if(document.getElementById("field1"+i+"").value=="")
{
alert ("field1 value missing");
document.getElementById("field1"+i+"").focus();
return false;
}
if(document.getElementById("field2"+i+"").value=="")
{
alert ("field2 value missing");
document.getElementById("field2"+i+"").focus();
return false;
}
}
return true;
}
var size=0;
var comarray= new Array(100);
function removeRowFromTable1(r,p)
{
var i=r.parentNode.parentNode.rowIndex;
var q=p;
if(isNaN(q)==true)
{
p=q.substr(10);
}
else
{
p=q;
}
comarray[size]=p;
size+=1;
var n=document.getElementById('CommTble').rows.length;
if(n==2)
alert("Atleast one has to be there. So it is not possible to delete the current row !!");
else
document.getElementById('CommTble').deleteRow(i);
}
我已经修改了你的代码。请看下面修改的代码。它很好用
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<TD>
<FORM NAME="iForm">
<INPUT type="HIDDEN" name="_row_count" id="_row_count" value="0" />
<INPUT type="HIDDEN" name="rowcount" id="rowcount" value="0" />
<P>
<INPUT type="button" value="Add Rows" onclick="addRowToTable();" />
</P>
<TABLE width='100%' border='1' id="CommTble">
<TR>
<TH CLASS='vrTableHeader' align='left'> Feild1 </TH>
<TH CLASS='vrTableHeader' align='left'>Feild2 </TH>
<TH CLASS='vrTableHeader' align='left'>Remove Field </TH>
</TR>
<TR>
<TD>
<INPUT TYPE='TEXT' NAME='field' id='field10' SIZE=15 MAXLENGTH="25" value="" />
</TD>
<TD>
<INPUT TYPE='TEXT' NAME='field' id='field20' SIZE=15 MAXLENGTH="25" value="" />
</TD>
<TD>
<INPUT TYPE='button' CLASS='vrFormText' NAME='DelButton_0' VALUE='Remove Row' SIZE=20 MAXLENGTH="18" ONCLICK="removeRowFromTable1(this,0);"/>
</TD>
</TR>
</TABLE>
<P>
<input type="button" class="submitest" value=" Save Record " name="Submit1" onclick="checkCommodity()">
<INPUT TYPE="RESET" NAME="Reset" CLASS="submitreset" VALUE="Reset">
<INPUT TYPE="hidden" id="deleteValue" VALUE="">
</P>
</FORM>
</TD>
</body>
<script>
document.getElementById('deleteValue').value = "";
function addRowToTable()
{
var tbl = document.getElementById('CommTble');
var lastRow = tbl.rows.length;
var iteration = lastRow-1;
lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellTwo = row.insertCell(0);
var e2 = document.createElement('input');
e2.type = 'text';
e2.name = 'field1'+ iteration;
e2.id = 'field1'+ iteration;
e2.size = '15';
e2.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e2);
var cellTwo = row.insertCell(1);
var e3 = document.createElement('input');
e3.type = 'text';
e3.name = 'field2'+ iteration;
e3.id = 'field2'+ iteration;
e3.size = '15';
e3.onkeypress=function(){return imposeMaxLength(this,parseInt(25))};
cellTwo.appendChild(e3);
var cellNine = row.insertCell(2);
var e9 = document.createElement('input');
e9.type='button';
e9.name='DelButton_'+iteration;
e9.id='DelButton_'+iteration;
e9.value='Remove Row';
e9.size='20';
e9.onclick=function(){return deleteRow(this.parentNode.parentNode.rowIndex)};
cellNine.appendChild(e9);
iForm._row_count.value=iteration;
iteration+=1;
}
function deleteRow(i)
{
var delVal = document.getElementById('deleteValue').value;
if(delVal == ""){
document.getElementById('deleteValue').value = "|"+delVal+i+"|";
}
else{
document.getElementById('deleteValue').value = delVal+i+"|";
}
document.getElementById('CommTble').deleteRow(i);
}
function checkCommodity()
{
var tble = document.getElementById('CommTble');
var LastRow = tble.rows.length-1;
var rcount=0;
var delVal = document.getElementById('deleteValue').value;
for(var i=0;i<LastRow;i++)
{
if(delVal.indexOf("|"+i+"|") <= -1){
var a=document.getElementById("field1"+i).value;
if(document.getElementById("field1"+i+"").value=="")
{
alert ("field1"+i+" value missing");
document.getElementById("field1"+i+"").focus();
return false;
}
if(document.getElementById("field2"+i+"").value=="")
{
alert ("field2"+i+" value missing");
document.getElementById("field2"+i+"").focus();
return false;
}
}
}
return true;
}
var size=0;
var comarray= new Array(100);
function removeRowFromTable1(r,p)
{
var delVal = document.getElementById('deleteValue').value;
if(delVal == ""){
document.getElementById('deleteValue').value = "|"+delVal+p+"|";
}
else{
document.getElementById('deleteValue').value = delVal+p+"|";
}
var i=r.parentNode.parentNode.rowIndex;
var q=p;
if(isNaN(q)==true)
{
p=q.substr(10);
}
else
{
p=q;
}
comarray[size]=p;
size+=1;
var n=document.getElementById('CommTble').rows.length;
if(n==2)
alert("Atleast one has to be there. So it is not possible to delete the current row !!");
else
document.getElementById('CommTble').deleteRow(i);
}
</script>
</html>
我认为小提琴演示会很精彩！是否有任何验证的解决方案制作一个JSFIDLE.net plz，这样我们就可以看到在删除第三行之前，该代码工作正常。在验证之后，该代码就不工作了