Coldfusion: Hide or Show Dynamically Created Table Rows

Hi experts,

Looking for some help as I've spun my wheels on this for far too long. What I am attempting is to create a data entry form using tables and rows where one record is represented by a table comprised of 3 rows. To add more than one record the user should be able to click a button and show (unhide) a new table, comprised of 3 rows. So basically what I'm doing is creating the first row/table so at least one is displayed, then in a loop I create 15 hidden row/tables. I want to be able to unhide the next row/table at the click of a button .

The problem seems to be with referencing the form elements created within the loop. With the included code I can toggle the first row/table either by the table or tr tag id. However, I can't toggle a row/table created within the loop. While my goal is not to actually utilize toggling (it is to unhide rows/tables only), the included code uses toggling for illustration.

A solution would be greatly appreciated.


      

<script language="JavaScript" type="text/javascript">
function toggleView(elementID){
	alert(elementID);
   var objRef = document.getElementById(elementID);
   if (objRef.style.display=="none"){
      objRef.style.display="block";
   } else {
      objRef.style.display="none";
   }
}
</script>
 
<p><button onclick="toggleView('row_1');" >Show/Hide Row 1</button></p>
<p><button onclick="toggleView('row_2');" >Show/Hide Row 2</button></p>
<p><button onclick="toggleView('tbl_A');" >Show/Hide Table A</button></p>
<p><button onclick="toggleView('tbl_1');" >Show/Hide Table 1</button></p>
<p><button onclick="toggleView('tbl_2');" >Show/Hide Table 2</button></p>
<br>
 
<table border="1" id="tbl_A" style="display:block;">
	<tr id="row_1">  
		<td colspan="2" >
			<table border="1" name="tbl_1" id="tbl_1" style="display:block;">
				<tr>
					<td nowrap align="right"><strong>Column1</strong></td>
					<td><cftextarea name="iss1" cols="80" rows="4" id="iss1" align="right" value="row_1"></cftextarea></td>
				</tr>
					<tr>
					<td nowrap align="right"><strong>Column2</strong></td>
					<td><cftextarea name="iss2" cols="80" rows="4" id="iss2" align="right" value="row_1"></cftextarea></td>
				</tr>
				<tr>
					<td nowrap align="right"><strong>Column3</strong></td>
					<td><cftextarea name="iss3" cols="80" rows="4" id="iss3" align="right" value="row_1"></cftextarea></td>
				</tr>							
			</table>
		</td>
	</tr>
	
	<CF_AlternateRowColors color1="ffffcc" color2="ccffff">
	<!--- start loop --->
	<cfloop index = "i" from = "2" to = "16">
		<tr id="row_#i#">  
			<td colspan="2" >
				<table border="1" name="tbl_#i#" id="tbl_#i#" >
					<tr>
						<td nowrap align="right"><strong>Column1</strong></td>
						<td><cftextarea name="iss_#i#" cols="80" rows="4" id="iss1" align="right" value="row_#i#"></cftextarea></td>
					</tr>
						<tr>
						<td nowrap align="right"><strong>Column2</strong></td>
						<td><cftextarea name="iss_#i#" cols="80" rows="4" id="iss2" align="right" value="row_#i#"></cftextarea></td>
					</tr>
					<tr>
						<td nowrap align="right"><strong>Column3</strong></td>
						<td><cftextarea name="iss_#i#" cols="80" rows="4" id="iss3" align="right" value="row_#i#"></cftextarea></td>
					</tr>							
				</table>
			</td>
		</tr>
 	</cfloop>
</table>

Select allOpen in new window