Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Table row's onclick to show/hide an embedded Div

    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.
    Code:
    <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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, and you will kick yourself:
    Code:
          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
    Code:
    function HideShowDiv(divID)
    {
    	var div = document.getElementById(divID);
            div.style.display = div.style.display == "none" ? "block" : "none";
    }

  • Users who have thanked Old Pedant for this post:

    DreamCPP (08-12-2011)

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by DreamCPP View Post
    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 (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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •