We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Coldfusion: Hide or Show Dynamically Created Table Rows

michaelcpaul
michaelcpaul asked
on
Medium Priority
2,380 Views
Last Modified: 2013-12-24
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>

Open in new window

Comment
Watch Question

You do have a cfoutput somewhere around all this code right?  Otherwise your rows and tables have ids like tbl_#i# instead tbl_#2#

Could your custom tag CF_AlternateRowColors be causing any problems?  Try removing it and check the difference, if any, that makes.

Does your JS function properly output the ID of the dynamic elements in the alert() ?  Or does even that not work?  If not, check your page for Javascript errors.




sp: "like tbl_#i# instead of tbl_2"

Author

Commented:
duncancumming,
The alert statement is in the function so I can see what I've passed - but - I can't say for sure that is the value being assiged to the id attribute. I am setting the value of the textfields using the same assignment I use for the id, but I really don't know for sure (and don't know how to tell) that that the assignment is being set as I'm expecting. If I try to pass one of the variables to the javascript function it does not work.
I have tried removing CF_AlternateRowColors (which isn't working either).
If I need a cfoutput in there, I don't know where that would be - which is why I'm looking for help :-)
 
Wrap your table inside the cfoutput, is probably the simplest way.  Take a look at the page source code in your browser, scroll down to the bit with the dynamic rows, and see if they have IDs like tbl_#i# or tbl_2.  If the latter, fine.  If the former, you need the cfoutput.

Or instead of putting it around the whole table, you could put it just inside your cfloop which should also work.

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

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
duncancumming,

That was it, needed a CFOUTPUT. And it never occurred to me to look at the source code. Feeling a kinda dumb at the moment....

Thanks for your help!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.