Through messing around I got IE6 (win xp) to show/hide a table row.
I gave my <TR> an ID of "trRow" and
trRow.style.display='none';
hides it
trRow.style.display='block';
displays it (will any value other than 'none' display on IE6?)
I tried enclosing the <TR></TR> inside a <DIV> tag, and hiding that,
but it doesn't work for some reason.
What modern popularly used browsers won't this work in, and can
someone post workarounds for the below example?
Thanks in advance.
<html>
<head>
<title>test</title>
</head>
<body>
<h1>attempting with tr.style.display, div tag, etc.</h1>
<h2>hidden table row test</h2>
<FORM NAME="Form1" ID="Form1">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function subShowHide()
{
if (document.Form1.txtState.value=='1')
{
//alert("hide");
document.Form1.txtState.value="0";
document.imgHide.src="show.gif";
//doesn't work:
div1.style.visibility = "hidden";
//works in IE:
trRow.style.display='none';
}
else
{
//alert("show");
document.Form1.txtState.value="1";
document.imgHide.src="hide.gif";
//doesn't work:
div1.style.visibility = "visible";
//works in IE:
trRow.style.display='block';
}
}
// End -->
</script>
<table border="1" width="95%">
<tr>
<td colspan="5" align="right" width="100%">
<img src="hide.gif" name="imgHide" id="imgHide"
onclick="subShowHide();">
</td>
</tr>
<div id="div1" name="div1">
<tr id=trRow name=trRow>
<td width="15%"><INPUT TYPE=TEXT NAME=TEST1 ID=TEST1 SIZE=5
VALUE="a"></td>
<td width="15%"><INPUT TYPE=TEXT NAME=TEST2 ID=TEST2 SIZE=5
VALUE="b"></td>
<td width="15%"><INPUT TYPE=TEXT NAME=TEST3 ID=TEST3 SIZE=5
VALUE="c"></td>
<td width="15%"><INPUT TYPE=CHECKBOX NAME=chkCurrent
VALUE=1></INPUT></td>
<td width="40%"><INPUT TYPE=BUTTON NAME=btnSearch VALUE="Search"
onclick="alert('click!');"><INPUT TYPE=HIDDEN NAME=txtState
ID=txtState VALUE="1" ></td>
</tr>
</div>
<tr>
<td width="15%">a</td>
<td width="15%">b</td>
<td width="15%">c</td>
<td width="15%">d</td>
<td width="40%">
<INPUT TYPE=BUTTON NAME=btnTest1 ID=btnTest1
VALUE="display='block'" onclick="trRow.style.display='block';">
<INPUT TYPE=BUTTON NAME=btnTest2 ID=btnTest2 VALUE="display='none'"
onclick="trRow.style.display='none';">
</td>
</tr>
</table>
</FORM>
</body>
</html>