[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2052
  • Last Modified:

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>

Open in new window

0
michaelcpaul
Asked:
michaelcpaul
  • 3
  • 2
1 Solution
 
duncancummingCommented:
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.




0
 
duncancummingCommented:
sp: "like tbl_#i# instead of tbl_2"
0
 
michaelcpaulAuthor 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 :-)
 
0
 
duncancummingCommented:
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

0
 
michaelcpaulAuthor 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!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now