堆栈内存溢出
  简体   繁体   English

如何随机验证动态行

[英]How to validate dynamic row randomly

 原文  2014-08-29 05:31:59  4   1    javascript/ html/ html-table/ cell

问题描述

I have a dynamic row creation, deletion and validation. 我有一个动态的行创建，删除和验证。 For creating and deleting the row it works properly. 对于创建和删除行，它可以正常工作。 Suppose, I am deleting first row , after that row can't be validated. 假设我要删除第一行，因为该行无法通过验证。 If I am not deleting first row, I can validate remaining. 如果我不删除第一行，则可以验证剩余的行。 If I am deleting any intermediate row, after that row can't be validated. 如果我要删除任何中间行，则该行之后无法进行验证。 

<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);
}

1 个解决方案

解决方案1
 0  2014-08-29 07:12:53

I have modified your code little bit. 我已经稍微修改了您的代码。 Please look at modified code below. 请在下面查看修改后的代码。 It works fine 工作正常 

<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用JavaScript验证动态行+选择的选择？ - How to validate dynamic row + chosen select with javascript? 如何验证 javascript 中的动态行数组值 - how to validate dynamic row array values in javascript 如何使用PHP验证动态表单？ - How to Validate Dynamic form with PHP? 如何验证 postman 中的动态值 - How to validate dynamic values in postman 如何使用jQuery Validate插件验证动态内容 - How to validate dynamic content using jQuery Validate plugin 如何使用动态ID验证html元素 - how to validate html elements with dynamic id 如何验证jquery .Validation（）中的动态datepicker？ - How to validate dynamic datepicker in jquery .Validation()? 如何在 React Native 中验证动态表单？ - How to validate dynamic form in React Native? 如何验证动态html表中的输入？ - how to validate input in a dynamic html table? 如何从 PHP 验证动态单选按钮 - How to validate dynamic radio button from PHP
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM