Hiding Tables at Page Load

L

LastOfEight

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>
 
M

Michael Winter

[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Click to expand...

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>
Click to expand...

You need to quote that attribute value.
<!--//
Click to expand...

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++){
Click to expand...

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
[...]
Click to expand...

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>
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Can anyone please help? HTML - two tables applying different styles 4
Sort by number of characters 1
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
Javascript DOM 1
Getting extra blank rows from appending HTML..? 2

Staff online

Members online

Total: 31 (members: 3, guests: 28)
Robots: 424

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,052
Latest member
LucyCarper

Latest Threads

Top