Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show/hide rows in dynamic coldfusion page 1

Status
Not open for further replies.

carrefo

Programmer
Feb 20, 2004
8
BE
Hi,

I have the following code.

Code:
<html>
	<head>
		<script type="text/javascript">
		<!--
			function showHideRow() {
				if( document.getElementById('row2').style.display=='none' ){
					document.getElementById('row2').style.display = '';
					document.getElementById('plusminus').innerHTML = '-';
					document.getElementById('plusminus').title = 'Hide detail';
				}else{
					document.getElementById('row2').style.display = 'none';
					document.getElementById('plusminus').innerHTML = '+';
					document.getElementById('plusminus').title = 'Show detail';
				}
			
			}
		//-->
		</script>
	</head>
	<body>
		<cfquery name="qGetAS2" datasource="AAA">
			SELECT 	AS2_DIR, 
				AS2_ADO_NUM, 
				AS2_BAS_LIN_DAT, 
				AS2_THI_PAR_NAM, 
				AS2_STATUS
			FROM	AS2
			WHERE	AS2_STATUS >= 0
			ORDER BY	AS2_STATUS,
				AS2_DIR, 
				AS2_BAS_LIN_DAT DESC, 
				AS2_ADO_NUM DESC
		</cfquery>
		<table width="100%" border="1" cellpadding="2" cellspacing="0" align="center">
			<tr>
				<th>&nbsp;</th>
				<th align="center"><br/>Dir.</th>
				<th align="center"><br/>Number</th>
				<th align="center">Baseline<br/>date</th>
				<th align="center"><br/>Status</th>
			</tr>
			<cfoutput query="qGetAS2">
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">#qGetAS2.AS2_DIR#</td>
					<td align="center">#qGetAS2.AS2_ADO_NUM#</td>
					<td align="center">#qGetAS2.AS2_BAS_LIN_DAT#</td>
					<td align="center">#qGetAS2.AS2_STATUS#</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">#qGetAS2.AS2_THI_PAR_NAM#</td>
				</tr>
			</cfoutput>
		</table>
	</body>
</html>

What I must do, and I don't know how, is that each time I click in one + column, the detail row will show, and this in any row, which will allow the users to compare the different clients (this is a small example, the page have more information). Like it is now, when I click the + column, I manage to show/hide only the first detail. Since I'm completely new in JScript, can any of you guys give me an idea on how to do it.

Thanks in advance
 
are there multiple records in the cfquery?

if so you are defining each row with the same ID, do you have a page with the finished output HTML so we can see what is generated by this CF file.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Hi,

Yes, there is a search form, and the result can be between 1 and hundreds of rows (with 20 in each page, which i didn't put in this example).
I joint a little result page:
Code:
<html>
	<head>
		<script type="text/javascript">
		<!--
			function showHideRow() {
				if( document.getElementById('row2').style.display=='none' ){
					document.getElementById('row2').style.display = '';
					document.getElementById('plusminus').innerHTML = '-';
					document.getElementById('plusminus').title = 'Hide detail';
				}else{
					document.getElementById('row2').style.display = 'none';
					document.getElementById('plusminus').innerHTML = '+';
					document.getElementById('plusminus').title = 'Show detail';
				}
			
			}
		//-->
		</script>
	</head>
	<body>
		
		<table width="100%" border="1" cellpadding="2" cellspacing="0" align="center">
			<tr>
				<th>&nbsp;</th>
				<th align="center"><br/>Dir.</th>
				<th align="center"><br/>Number</th>
				<th align="center">Baseline<br/>date</th>
				<th align="center"><br/>Status</th>
			</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">15156</td>
					<td align="center">2006/09/20</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Mostra</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">0</td>
					<td align="center">2006/09/20</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Mondorf</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">14652</td>
					<td align="center">2006/09/12</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">IRIS</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">0</td>
					<td align="center">2006/08/18</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Mostra</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">13383</td>
					<td align="center">2006/08/17</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">CECOFORMA</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">11319</td>
					<td align="center">2006/07/10</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">AVL</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">10805</td>
					<td align="center">2006/06/30</td>
					<td align="center">0</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">OPOCE</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">0</td>
					<td align="center">2006/09/19</td>
					<td align="center">1</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Debeuckelaere</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">0</td>
					<td align="center">2006/09/19</td>
					<td align="center">1</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Brunko</td>
				</tr>
			
				<tr>
					<td align="center" id="plusminus" onclick="showHideRow()" title="Show detail">+</td>
					<td align="center">A</td>
					<td align="center">0</td>
					<td align="center">2006/09/07</td>
					<td align="center">1</td>
				</tr>
				<tr>
					<td align="left" colspan="5" style="display:none" id="row2">Schouten & nelissen</td>
				</tr>
			
		</table>
	</body>
</html>

I never know how many rows I will have after the search, so I really don't have any ideia on how this can be done, if can be done(I hope yes :))

Thanks
 
if you look you are defining
Code:
id="plusminus"
multiple times, you can only have 1 element with an ID of "plusminus" - ID is UNIQUE Identifyer.

you need to create dynamic unique id's for each row and pass the script the row id you want to show
Code:
<script type="text/javascript">
        <!--
            function showHideRow([b]myid[/b]) {
                if( document.getElementById('row2'[b]+myid[/b]).style.display=='none' ){
                    document.getElementById('row2'[b]+myid[/b]).style.display = '';
                    document.getElementById('plusminus'[b]+myid[/b]).innerHTML = '-';
                    document.getElementById('plusminus'[b]+myid[/b]).title = 'Hide detail';
                }else{
                    document.getElementById('row2'[b]+myid[/b]).style.display = 'none';
                    document.getElementById('plusminus'[b]+myid[/b]).innerHTML = '+';
                    document.getElementById('plusminus'[b]+myid[/b]).title = 'Show detail';
                }
            
            }
        //-->
        </script>

now it's been a while since I used ColdFusion so can't remember the syntax for it so bare with me on this but you need to create a variable
Code:
[b]<cfset rowid=0>[/b]
<cfoutput query="qGetAS2">
[b]<cfset rowid=rowid+1>[/b]
                <tr>
                    <td align="center" id="plusminus[b]#rowid#[/b]" onclick="showHideRow([b]#rowid#[/b])" title="Show detail">+</td>
                    <td align="center">#qGetAS2.AS2_DIR#</td>
                    <td align="center">#qGetAS2.AS2_ADO_NUM#</td>
                    <td align="center">#qGetAS2.AS2_BAS_LIN_DAT#</td>
                    <td align="center">#qGetAS2.AS2_STATUS#</td>
                </tr>
                <tr>
                    <td align="left" colspan="5" style="display:none" id="row2[b]#rowid#[/b]">#qGetAS2.AS2_THI_PAR_NAM#</td>
                </tr>
            </cfoutput>

hopefully this gives you the idea


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
MANY, MANY THANKS

It works perfectly. Exactly what I need.

Cheers
 
how about a star then ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
lol - thanks , glad i could help

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top