473,324 Members | 2,178 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

dynamically show/hide a table row in most browsers?

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


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


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Harry | last post by:
I want to provide a drill down facility for the users - the plan is to intially display a table with summary rows containing results of previous selected search criteria. In each summary row you...
2
by: Joe Smith | last post by:
Hi, I'm using the code below to change the contents of a cell table in IE. The problem is that the cell size won't adjust to the size of the content, as its positions have been declared 'absolute'....
10
by: TheKeith | last post by:
I don't know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly. Here is what I'm doing. I have a bunch of thumbnails that when...
4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
12
by: Jerad Rose | last post by:
I searched for a while trying to find the answer to this, but to no avail. I am trying to find the best way (or any way) to dynamically show and hide groups of TR's. For example, I have a...
2
by: Chad | last post by:
I have a problem that I am desperate to understand. It involves dynamically adding controls to a Table control that is built as a result of performing a database query. I am not looking to...
18
by: blueapricot416 | last post by:
I am on a team designing the front end of an Intranet application. The backend guys will be using JSP and AJAX-like functionality to make server requests that must dynamically change elements on a...
11
by: jimstruckster | last post by:
I have a table with 10 rows, I want all rows except for the first to be hidden when the page first opens up. If the user puts a value in a text box in the first row then I want the second row to...
18
chunk1978
by: chunk1978 | last post by:
hi everyone. i just started learning how to dynamically show/hide elements with a checkbox toggle. i would like to know if it's possible to delete/rewrite elements instead of simply show/hide...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.