SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Beginner: Hide TR on page load

    Hi,

    I want to have Javascript hide a table row (tr) when the page is called, then have links to show/hide the tr as a toggle.

    The show/hide links work fine, but I can't get the tr to be hidden when the page loads. I'm trying to do this with an external (not inline) function so that I can eventually put all my Javascript into it's own file. Can anyone see how to make this work?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function funHideTR() {
    	var rowToHide = document.getElementById('tablerow');
    	if (rowToHide) then {
    		rowToHide.style.display='none';
    	}
    }
    </script>
    </head>
    <body onload="funHideTR();">
    <a href="#" onclick="document.getElementById('tablerow').style.display=''">Show contents</a><br />
    <a href="#" onclick="document.getElementById('tablerow').style.display='none'">Hide contents</a>
    <table width="400">
    <tr id="tablerow">
    <td>Contents of table row<td>
    </tr>
    </table>
    </body>
    </html>
    Thanks for any help folks!

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it!!

    Code:
    <html>
    <head>
    <title>My Doc</title>
    <script type="text/javascript">
    function funHideTR() {
    	var rowToHide;
    	rowToHide = document.getElementById('tablerow');
    	if (rowToHide) {
    		rowToHide.style.display='none';
    	}
    }
    </script>
    </head>
    <body onload="funHideTR();">
    <a href="#" onclick="document.getElementById('tablerow').style.display=''">Show contents</a><br />
    <a href="#" onclick="document.getElementById('tablerow').style.display='none'">Hide contents</a>
    <table width="400">
    <tr id="tablerow">
    <td>Contents of table row<td>
    </tr>
    </table>
    </body>
    </html>
    The "var" declaration in the script needs to be on it's own line. You can't populate it at the same time as declaring it (unlike VBScript, which I'm used to). Great!!

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The "var" declaration in the script needs to be on it's own line. You can't populate it at the same time as declaring it.
    No, it doesn't need to be on separate lines. The problem was the "then" keyword, not that.

    Using body's inline onload attribute is bad practice. Using inline event handlers on other elements is not best practice, because it's best to put all JavaScript, including events, in external .js files. It's even worse to use them on <body> because they will overwrite any events for window defined in other JavaScript code blocks. I suggest you read up on Unobtrusive JavaScript.

    Try this.
    Code:
    <script type="text/javascript">
    function funHideTR() {
    	if (!document.getElementById) return;
    	var rowToHide = document.getElementById('tablerow');
    	if (rowToHide) {
    		rowToHide.style.display='none';
    	}
    }
    window.onload = funHideTR;
    </script>
    </head>
    <body>
    P.S. Why did you start a new thread instead of continuing the old one?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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