Hiding Tables at Page Load

Discussion in 'Javascript' started by LastOfEight, Nov 11, 2004.

  1. LastOfEight

    LastOfEight Guest

    I'm trying to hide tables in the code below, but it is not working.
    Could someone take a look at my code?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD><TITLE>Untitled Document</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <SCRIPT type=text/javascript>


    <!--//
    function hideRows(){

    for (i = 0; i <= 5; i++){
    id = ('table'+i);
    document.write(id);
    var e2 = document.getElementById(id);
    document.write("<br>"+e2);
    e2.style.display='none';
    document.write("<br>"+i);
    }


    }
    //-->
    </SCRIPT>

    </HEAD>

    <BODY onload="hideRows()" >

    <FORM name=form1 action="" method=post>
    <TABLE width="75%" border=0>
    <TBODY>
    <TR>
    <TD width="6%"><INPUT onclick="hideShow('table1')" type=checkbox
    value=1 name=check_1></TD>
    <TD width="94%">All hardware and software is listed</TD></TR>
    <TR>
    <TD>&nbsp;</TD>
    <TD>
    <TABLE id=table1 borderColor=#ff0000 cellSpacing=0 cellPadding=0
    width="40%" border=0>
    <TBODY>
    <TR>
    <TD><INPUT type=radio value=checkbox name=radio> Issue</TD>
    <TD><INPUT type=radio value=checkbox name=radio> Minor
    Issue</TD>
    <TD><INPUT type=radio value=checkbox name=radio> Ok</TD>
    </TR>
    <TR>
    <TD align=middle colSpan=3><INPUT size=50></TD>
    </TR>
    <TR>
    <TD>&nbsp</TD>
    </TR>
    </TBODY>
    </TABLE>
    </TD></TR>
    <TR>
    <TD width="6%"><INPUT onclick="hideShow('table2')" type=checkbox
    value=1 name=check_2></TD>
    <TD width="94%">ID number matches manufacturer's request and chip
    label</TD>
    </TR>
    <TR>
    <TD>&nbsp;</TD>
    <TD>
    <DIV align=left></DIV>
    <TABLE id=table2 borderColor=#ff0000 cellSpacing=0 cellPadding=0
    width="40%" border=0>
    <TBODY>
    <TR>
    <TD><INPUT type=radio value=checkbox name=radio2>
    Issue</TD>
    <TD><INPUT type=radio value=checkbox name=radio2> Minor
    Issue</TD>
    <TD><INPUT type=radio value=checkbox name=radio2> Ok</TD>
    </TR>
    <TR>
    <TD align=middle colSpan=3><INPUT size=50></TD>
    </TR>
    </TR>
    </TBODY>
    </TABLE>
    </TD>
    </TR>
    <TR>
    <TD>&nbsp;</TD>
    <TD>&nbsp;</TD></TR></TBODY></TABLE>
    <P>&nbsp;</P></FORM></BODY></HTML>
    LastOfEight, Nov 11, 2004
    #1
    1. Advertising

  2. On 11 Nov 2004 07:04:35 -0800, LastOfEight <> wrote:

    [snip]

    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


    DOCTYPEs without the URL aren't always recognised. Also, you'll probably
    want to use HTML 4.01, not 4.0:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    [snip]

    > <SCRIPT type=text/javascript>


    You need to quote that attribute value.

    > <!--//


    Hiding scripts is an outdated practice. All browsers now in use understand
    what a SCRIPT element is, even if they can't execute them.

    > function hideRows(){
    > for (i = 0; i <= 5; i++){


    From a quick look, the line above is the source of your problems. You
    don't have a table with the id, table0, so getElementById will return
    null. Obviously, trying to access any property of null is nonsense, so the
    script errors and drops out of the function. Similarly, you don't have
    table3, table4, or table5 (unless you cut the HTML short).

    By the way, you should declare i, id, and e2 using the var keyword. If
    not, they'll become global variables.

    [snip]

    > <TABLE id=table1 borderColor=#ff0000 cellSpacing=0 cellPadding=0
    > [...]


    You need to quote the attribute value for bordercolor. Really, you
    shouldn't be using tables for layout anyway, and CSS should replace
    presentational attributes.

    > <TBODY>


    There's nothing wrong with including the TBODY element, but it's only
    necessary if you actually have more than one table section.

    [snip]

    That should solve the script problems, but I do suggest you validate your
    HTML (<URL:http://validator.w3.org/>).

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 11, 2004
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. sridhar
    Replies:
    2
    Views:
    358
  2. MN
    Replies:
    1
    Views:
    131
    Curt_C [MVP]
    Oct 10, 2005
  3. luvdairish

    Hiding Tables - New to the Group

    luvdairish, Nov 11, 2004, in forum: Javascript
    Replies:
    3
    Views:
    83
    Michael Winter
    Nov 11, 2004
  4. Replies:
    1
    Views:
    87
    web.dev
    Jul 23, 2005
  5. Ste
    Replies:
    41
    Views:
    805
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page