I have the following html code on my ASP page (I am using classic ASP)
<TABLE id="Table1">
<TBODY>
<TR>
<TD>Col1
</TD>
<TD>Col2</TD>
<TD>Col3</TD>
</TR>
<TR>
<TD vAlign="top"><INPUT name="First_1"></TD>
<TD vAlign="top"><INPUT name="Second_1"></TD>
<TD vAlign="top"><INPUT name="Third_1"></TD>
</TR>
</TBODY>
</TABLE>
<DIV id="div2"></DIV>
<INPUT onclick="generateRow()" type="button" value="Add Another">
I need to generate additional rows for the table above. I am using the following javascript to do so
function generateRow() {
var d=document.getElementById(
"div2");
d.innerHTML+='<tr><td valign="top" > <input name="First_1" type="text" > </td>';
d.innerHTML+='<td valign="top" ><input name="Second_1" type="text" > </td>';
d.innerHTML+='<td valign="top" ><input name="Third_1" type="text" > </td></tr>';
d.innerHTML+="</div>";
}
but there is one problem - the textboxes in each row have the same name i.e I get:
<TABLE id="Table1">
<TBODY>
<TR>
<TD>Col1
</TD>
<TD>Col2</TD>
<TD>Col3</TD>
</TR>
<TR>
<TD vAlign="top"><INPUT name="First_1"></TD>
<TD vAlign="top"><INPUT name="Second_1"></TD>
<TD vAlign="top"><INPUT name="Third_1"></TD>
</TR>
<TR>
<TD vAlign="top"><INPUT name="First_1"></TD>
<TD vAlign="top"><INPUT name="Second_1"></TD>
<TD vAlign="top"><INPUT name="Third_1"></TD>
</TR>
</TBODY>
</TABLE>
and what I want is to increment the numbers of the rows added so that my table would look like this:
<TABLE id="Table1">
<TBODY>
<TR>
<TD>Col1
</TD>
<TD>Col2</TD>
<TD>Col3</TD>
</TR>
<TR>
<TD vAlign="top"><INPUT name="First_1"></TD>
<TD vAlign="top"><INPUT name="Second_1"></TD>
<TD vAlign="top"><INPUT name="Third_1"></TD>
</TR>
<TR>
<TD vAlign="top"><INPUT name="First_2"></TD>
<TD vAlign="top"><INPUT name="Second_2"></TD>
<TD vAlign="top"><INPUT name="Third_2"></TD>
</TR>
</TBODY>
</TABLE>
I want to do that dynamically using javascript. Could anyone help?
Start Free Trial
