By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,425 Members | 2,549 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,425 IT Pros & Developers. It's quick & easy.

dynamically show/hide a table row in most browsers?

P: n/a
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';">
&nbsp;
</td>
</tr>
</table>

</FORM>

</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
In article <7a**************************@posting.google.com >,
us*************@yahoo.com enlightened us with...
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.

Learn html before trying these sorts of things. :)

TR is a child of TBODY, THEAD, TFOOT or TABLE only. Not DIV.
Simply put, it's invalid markup, so it shouldn't work in any browser. IE
is simply forgiving.
--
--
~kaeli~
Never say, "Oops!"; always say, "Ah, interesting!"
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #2

P: n/a


Mad Scientist Jr wrote:
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?)


Well, use
<tr id="aTr">
and then with Netscape 6/7, IE5+, Opera 7 you can toggle
var row = document.getElementById('aTr');
if (row && row.style) {
row.style.display = 'none'; // hide
}
if (row && row.style) {
row.style.display = ''; // show
}
}
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #3

P: n/a
On Thu, 4 Mar 2004 15:16:07 -0600, kaeli <ti******@NOSPAM.comcast.net>
wrote:
In article <7a**************************@posting.google.com >,
us*************@yahoo.com enlightened us with...


[snip]
I tried enclosing the <TR></TR> inside a <DIV> tag, and hiding that,
but it doesn't work for some reason.


Learn html before trying these sorts of things. :)

TR is a child of TBODY, THEAD, TFOOT or TABLE only. Not DIV.
Simply put, it's invalid markup, so it shouldn't work in any browser. IE
is simply forgiving.


Nor, incidentally can a DIV element be a child of those elements. The
section of the DTD regarding tables shows that:

- The TABLE element may only contain:
A CAPTION (optional)
A series of COL or COLGROUP elements[1] (optional)
A THEAD (optional)
A TFOOT (optional)
At least one TBODY[2]
- The THEAD, TFOOT and TBODY elements may only contain TR elements
and there must be at least one
- The TR element may contain TH or TD elements, but they cannot be
mixed (only headers or only cells) and there must be at least one

This is regardless of document type (Strict, Frameset or Transitional).

TD and TH elements can contain any block or inline element. In other
words, the only place that the OP can put that DIV is inside a cell (and
the cell must fully encapsulate it), or outside the table (and it must
fully encapsulate that).

Mike
[1] If COL elements are used, only COL elements can be used in that table,
and vice versa.
[2] If there is only one, the actual tags can be omitted, but the TBODY is
implicit.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #4

P: n/a
> > 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?)

Learn html before trying these sorts of things. :)
TR is a child of TBODY, THEAD, TFOOT or TABLE only. Not DIV.
Simply put, it's invalid markup, so it shouldn't work in any browser. IE
is simply forgiving.


Thanks for the information. How do you hide the <TR> *without* any DIV
tags, in all modern popular browsers? Will trRow.style.display='none'
work for them all? What is 'block' ? This needs to work for IE 5 & 6
for Windows and Mac, as well as Netscape 4.7 on for Windows and Mac.
It would even be nice if it worked in Opera or whatever crazy LINUX
browsers people are using. Thanks again
Jul 20 '05 #5

P: n/a
In article <7a**************************@posting.google.com >,
us*************@yahoo.com enlightened us with...

Thanks for the information. How do you hide the <TR> *without* any DIV
tags, in all modern popular browsers? Will trRow.style.display='none'
work for them all?
Kinda.
If trRow is
trRow = document.getElementById("someId");
What is 'block' ?
I dunno. Look it up. :)
This needs to work for IE 5 & 6
for Windows and Mac, as well as Netscape 4.7 on for Windows and Mac.
It would even be nice if it worked in Opera or whatever crazy LINUX
browsers people are using. Thanks again


Your original code with style.display should be fine for IE5+, NN6+,
Mozilla, and Opera. I haven't tested it. Works in theory.

NN4 cannot do these things. Sorry. Most sites quit supporting that
browser, actually, if you look around. We just make sure stuff doesn't
actually crash in it.
NN is on 7, FCOL. NN4 is dead. It's like trying to support IE3.
--
--
~kaeli~
He often broke into song because he couldn't find the key.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #6

P: n/a
DU
Martin Honnen wrote:


Mad Scientist Jr wrote:
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?)

Well, use
<tr id="aTr">
and then with Netscape 6/7, IE5+, Opera 7 you can toggle
var row = document.getElementById('aTr');
if (row && row.style) {
row.style.display = 'none'; // hide
}
if (row && row.style) {
row.style.display = ''; // show
}
}

MSIE 6 will support style.display = "block" while Mozilla-based browsers
and Opera 7.x will support style.display = "table-row".

E.g.:

http://www10.brinkster.com/doctorunc...nCollapse.html

DU
Jul 20 '05 #7

P: n/a


DU wrote:
Martin Honnen wrote:
Well, use
<tr id="aTr">
and then with Netscape 6/7, IE5+, Opera 7 you can toggle
var row = document.getElementById('aTr');
if (row && row.style) {
row.style.display = 'none'; // hide
}
if (row && row.style) {
row.style.display = ''; // show
}
}


MSIE 6 will support style.display = "block" while Mozilla-based browsers
and Opera 7.x will support style.display = "table-row".


That is why I suggest to use script with
row.style.display = 'none'
to hide and script with
row.style.display = '';
to show an element as that way the inline style is empty and the user
agents default style kicks in.
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.