How do I hide a row in a table?

[kateyez44]

Hi. What I would like to do is hid a row or rows in a table depending on the answer to a question that is also in the table. Here is what I have tried:


<TR CLASS = "AlternateLine">
<TD>3.</TD>
<TD>Have you ever worked under another social security number?</TD>
<TD>
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = "Y" ONCLICK="showIt('OtherSSN')">Yes
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = "N" ONCLICK="hideIt('OtherSSN')">No
</TD>
</TR>

<DIV ID = "OtherSSN" STYLE="position:relative">
<TR CLASS = "AlternateLine">
<TD>&nbsp;</TD>
<TD>If Yes, please enter that social security number:</TD>
<TD><INPUT TYPE = TEXT NAME = txtOtherSSN SIZE = 15></TD>
</TR>
</DIV>

//here are the JavaScript funcitons that I have in the page Head:

<SCRIPT TYPE = "text/javascript" LANGUAGE = "JavaScript">
<!--
function showIt(obj)
{
if (document.layers)
{
document.getElementById(obj).visibility="show";
}
else
{
document.getElementById(obj).style.visibility="visible";
}
}//end function

function hideIt(obj)
{
if (document.layers)
{
document.getElementById(obj).visibility="hide";
}
else
{
document.getElementById(obj).style.visibility="hidden";
}
}//end function
//-->
</SCRIPT>


This is not working. First, the row I want to hide is visible when the screen is first opened. How do I hide it when the screen is first loaded? Second, nothing happens when either the "Yes" or "No" option button is chosen. What is wrong with my code? Any help is greatly appreciated.

[gil davis]

You have not posted the style sheet information. What is the definition of the class "AlternateLine". Without that bit of info, it would be hard to tell what your problem is.

You have no <FORM> tag. You have no quotes around the type or the name attributes of the form elements. You are testing for document.layers, but the possibility of changing the visibility of a <TR> is nil in NS 4.

[kateyez44]

The code I posted above was only a few snippets of code, not the entire page, so that's why it appeared that I was missing some major elements. I managed to find a different coding solution, but thanks for the reply and trying to help, though. Here it is in case anyone else is wondering how to do this:


<SCRIPT TYPE = "text/javascript" LANGUAGE = "JavaScript">
<!--
function Toggle(target)
{
var obj=document.getElementById(target);
obj.style.display=(obj.style.display=='none')?'inline':'none';
}//end function

function showIt(target)
{
var obj=document.getElementById(target);

obj.style.display='inline';
}//end function

function hideIt(target)
{
var obj=document.getElementById(target);

obj.style.display='none';
}//end function
//-->
</SCRIPT>

//The Radio buttons call showIt and hideIt to show or hide the rows
<TR CLASS = "AlternateLine">
<TD>4.</TD>
<TD>Have you ever worked under another social security number?</TD>
<TD>
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = "Y" ONCLICK="showIt('OtherSSN')">Yes
<INPUT TYPE = RADIO NAME = optOtherSSN VALUE = "N" ONCLICK="hideIt('OtherSSN')">No
</TD>
</TR>

<TR CLASS = "ConditionalAltLine" ID = "OtherSSN" STYLE = "display:none">
<TD>&nbsp;</TD>
<TD>If Yes, please enter that social security number:</TD>
<TD><INPUT TYPE = TEXT NAME = txtOtherSSN SIZE = 15></TD>
</TR>

//A single checkbox calls Toggle to show or hide the row depending on whether it's already showing
<TR CLASS = "AlternateLine">
<TD>3.</TD>
<TD>Enter your area code and telephone number:</TD>
<TD>(<INPUT TYPE = TEXT NAME = txtAreaCode SIZE = 3>)<INPUT TYPE = TEXT NAME = txtExchange SIZE = 3>
- <INPUT TYPE = TEXT NAME = txtNumber SIZE = 4>
<INPUT TYPE = CHECKBOX NAME = chkNoPhone ONCLICK="Toggle('MsgPhone')">No Telephone Number
</TD>
</TR>

<TR CLASS = "ConditionalAltLine" ID = "MsgPhone" STYLE = "display:none">
<TD>&nbsp;</TD>
<TD>If No telephone number, enter the area code and telephone number of a message phone:</TD>
<TD>(<INPUT TYPE = TEXT NAME = txtAreaCode SIZE = 3>)<INPUT TYPE = TEXT NAME = txtExchange SIZE = 3>
- <INPUT TYPE = TEXT NAME = txtNumber SIZE = 4>
<INPUT TYPE = CHECKBOX NAME = chkNoPhone VALUE = "Y">No Message Phone
</TD>
</TR>