...

View Full Version : Table row's onclick to show/hide an embedded Div



DreamCPP
08-12-2011, 02:51 AM
I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function. Here is what the outputed html looks like.


<head>
<script type="text/javascript" language="javascript">
function HideShowDiv(divID)
{
if (document.getElementById(divID).style.display == "none")
{
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}
else
{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}
}
</script>
<STYLE>
<!--
tr { background-color: transparent}
.normal { background-color: transparent }
.highlight { background-color: #dcfac9 }
//-->
</style></head>
<body>
<!-- Start the main body DIV tag -->
<div id="PageBodyFrame" align="center">
<table width="80%">
<tr><td colspan="4">Georgetown Youth Baseball Association</td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD1');">
<td align="left">James Beach</td>
<td align="center">1 Game(s)</td>
<td align="right">$22.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&u=1">Cut Check</a></td>
</tr>

<!-- First hidden div embedded in the next row of main table -->
<tr><td colspan="4">
<div id="HD1" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td></tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Marin vs LBF</td>
<td align="right">\$22.50</td>
</tr></table></div></td></tr>

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD3');">
<td align="left">John Carpenter</td>
<td align="center">0 Game(s)</td>
<td align="right">$1.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&a=3">Cut Check</a></td>
</tr>

<!-- Second Hidden div embedded in table row -->
<tr><td colspan="4">
<div id="HD3" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td>
</tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Assigner Fee</td>
<td align="right">\$1.50</td>
</tr></table></div></td></tr>

<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">\$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->



In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Any thoughts on this would be greatly appreciated. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user.

Old Pedant
08-12-2011, 03:08 AM
You can't use document.write() after an HTML page is loaded.

If you do, you WIPE OUT all current content on the page (even the JS that did the document.write!).

Use calls to alert() instead.

Old Pedant
08-12-2011, 03:14 AM
Oh, and you will kick yourself:


document.getElementById(divID).style.display = "block");

You have an extra bogus right paren just before the semicolon on that line.

Minor suggestion: recode to simpler/cleaner


function HideShowDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = div.style.display == "none" ? "block" : "none";
}

bullant
08-12-2011, 03:28 AM
Food for thought:

You have nested tables enclosed inside redundant divs - unless you need the divs for styling extra layers.

Maybe consider changing from using table layouts, especially nested tables, and use semantically correct elements and CSS for styling.

You'll find in general that your html will be less bloated and maintenance of layout and styles will be much easier.

DreamCPP
08-12-2011, 04:25 AM
thanks for the input guys. removing the straggling ')' from the script fixed it. Have spent hours trying to figure it out and never noticed it. Thanks.

bullant
08-12-2011, 04:33 AM
thanks for the input guys. removing the straggling ')' from the script fixed it. Have spent hours trying to figure it out and never noticed it. Thanks.

I have no idea what text editor you are using but if you use an IDE like Netbeans (http://netbeans.org/)(its free), it highlights mismatched/missing brackets, syntax errors and has a whole host of other bells and whistles which can save a lot of time during development.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum