dynamically show/hide a table row in most browsers?

Mad Scientist Jr · Mar 4, 2004

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

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

kaeli · Mar 4, 2004

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.

--

Martin Honnen · Mar 5, 2004

Mad said:
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
}
}

Michael Winter · Mar 5, 2004

(e-mail address removed) 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.

Click to expand...

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.

Mad Scientist Jr · Mar 5, 2004

Through messing around I got IE6 (win xp) to show/hide a table row.

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

kaeli · Mar 5, 2004

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.

--

DU · Mar 6, 2004

Martin said:
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/doctorunclear/HTMLJavascriptCSS/TableRowColumnCollapse.html

DU

Martin Honnen · Mar 6, 2004

DU said:
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.

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	Jan 10, 2021
Only one table shows up with the information	2	Mar 29, 2023
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery?	4	Sep 29, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
Javascript DOM	1	Mar 29, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

dynamically show/hide a table row in most browsers?

Mad Scientist Jr

kaeli

Martin Honnen

Michael Winter

Mad Scientist Jr

kaeli

DU

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads