how to Hide TABLE rows by grouping them into DIV?

[Wang, Jay]

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

[Martin Honnen]

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

With HTML 4 you can certainly put <tr> elements into a <tbody> element
to group them and then hide the complete <tbody> element with script
changing the CSS display property. A <div> element however is not meant
to group <tr> elements.

--

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

[Carl Smotricz]

As Martin already pointed out, you can't just disrupt the structure of a
TABLE (or TBODY) by throwing in a DIV. They're not meant to nest that way.

What I think would be a neat workaround is to assign a common class to
all the TRs you would like to be able to hide/unhide. Then you should be
able to hide/unhide them as a group by manipulating the CSS stylesheet
that defines the class.

Unfortunately, I don't know how to do this - manipulate the stylesheet,
that is :)

Have fun!

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

[Grant Wagner]

You don't have to manipulate the stylesheet. And given the differences across
browsers attempting to do so, I strongly urge you to make use of "className"
instead:

<style type="text/css">
/*
IE 5.5 does not actually support "table-row-group"
only "table-header-group" and "table-footer-group"
but I've found the following CSS renders correctly
*/
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>
<script type="text/javascript">
function toggleTbody(id) {
if (document.getElementById) {
var tbod = document.getElementById(id);
if (tbod && typeof tbod.className == 'string') {
if (tbod.className == 'off') {
tbod.className = 'on';
} else {
tbod.className = 'off';
}
}
}
return false;
}
</script>
<a href="#" onclick="return toggleTbody('two');">Toggle tbody two</a>
<table>
<tbody id="one">
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
<tr>
<td>One</td><td>One</td><td>One</td>
</tr>
</tbody>
<tbody id="two">
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
<tr>
<td>Two</td><td>Two</td><td>Two</td>
</tr>
</tbody>
<tbody id="three">
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
<tr>
<td>Three</td><td>Three</td><td>Three</td>
</tr>
</tbody>
</table>

Note that there is no initial CSS class assigned to the tbody elements. As a
result, my condition *must* be written testing className against the string "off".
If the test were against "on", you'd miss the fact that the tbody elements are
already "on", even though className is "".

There are other ways of doing this, but they are mostly all variations on this
basic theme.

Carl Smotricz wrote:

Unfortunately, I don't know how to do this - manipulate the stylesheet,
that is :)

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq

[martin]

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

drop the div , and set an id on each of the table's rows . you should be
able to use the same technique on <tr> too .

[Wang, Jay]

Thanks, Martin, Carl and Grant.
I probably should read those document in details before trying stunts. :)
The problem lies in the table (someone else's work) I'm working on is that
there is a long rowspan. By using TBODY, it will interrupt the display of
the form.

Carl's suggestion works well, I put the same style to the rows needed to be
hidden and use javascript to toggle the stylesheet's rule.

________________________________________
<HTML>
<style type="text/css">
<!--
..block {
display: block;
}
-->
</style>

<script language="JavaScript">

function toggle(){
var theTable = (document.getElementById('myTABLE'));
var theTB = theTable.tBodies.item(0);
var theTR = document.styleSheets[0].rules[0];
if ((theTR.style.display=="")||(theTR.style.display== "block"))
theTR.style.display="none";
else
theTR.style.display="block";
}
</script>
<BODY>

<table id="myTABLE" border="1" width="100" align="center" cellpadding="0"
cellspacing="0">

<tr id="TR1" class="block1">
<td width="50" id="TD11">1.1</td>
<td width="50" id="TD12">1.2</td>
</tr>
<div id="text">
<tr id="TR2" class="block">
<td width="50" id="TD21">2.1</td>
<td width="50" id="TD22">2.2</td>
</tr>

<tr id="TR3" class="block">
<td width="50" id="TD31">3.1</td>
<td width="50" id="TD32">3.2</td>
</tr>
</div>
</table>
<br><br>
<center><a href="javascript:toggle();">show/hide</a></center>

</BODY>
</HTML>
__________________________________________

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:41********@olaf.komtel.net...

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

With HTML 4 you can certainly put <tr> elements into a <tbody> element
to group them and then hide the complete <tbody> element with script
changing the CSS display property. A <div> element however is not meant
to group <tr> elements.

--

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

[bruce]

"Wang, Jay" <ou**********@fastmail.fm> wrote in message news:<ce**********@news.vanderbilt.edu>...

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

hey, try <SPAN> instead of <DIV>. I'm not saying it will work, but
I've found some strange things work with one and not the other, and
vice versa. Worth a simple try.

[Thomas 'PointedEars' Lahn]

bruce wrote:

"Wang, Jay" <ou**********@fastmail.fm> wrote in message news:<ce**********@news.vanderbilt.edu>...

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

hey, try <SPAN> instead of <DIV>. [...]

Nonsense.

,-[HTML 3.2]
|
| <!ELEMENT table - - (caption?, tr+)>

,-[HTML 4.01 Transitional/Strict]
|
| <!ELEMENT TABLE - -
| (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

,-[XHTML 1.0 Transitional/Strict]
|
| <!ELEMENT table
| (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

,-[XHTML 1.1 Basic Table Module]
|
| <!-- table: Table Element .............................. -->
|
| <!ENTITY % table.element "INCLUDE" >
| <![%table.element;[
| <!ENTITY % table.content
| "( %caption.qname;?, %tr.qname;+ )"
| >
| <!ELEMENT %table.qname; %table.content; >
| <!-- end of table.element -->]]>

,-[XHTML 1.1 Table Module]
|
| <!-- table: Table Element .............................. -->
|
| <!ENTITY % table.element "INCLUDE" >
| <![%table.element;[
| <!ENTITY % table.content
| "( %caption.qname;?, ( %col.qname;* | %colgroup.qname;* ),
| (( %thead.qname;?, %tfoot.qname;?, %tbody.qname;+ ) | ( %tr.qname;+
| )))"
| >
| <!ELEMENT %table.qname; %table.content; >
| <!-- end of table.element -->]]>
PointedEars

[Wang, Jay]

Thanks, Martin, Carl and Grant.
I probably should read those document in details before trying stunts. :)
The problem lies in the table (someone else's work) I'm working on is that
there is a long rowspan. By using TBODY, it will interrupt the display of
the form.

Carl's suggestion works well, I put the same style to the rows needed to be
hidden and use javascript to toggle the stylesheet's rule.

________________________________________
<HTML>
<style type="text/css">
<!--
..block {
display: block;
}
-->
</style>

<script language="JavaScript">

function toggle(){
var theTable = (document.getElementById('myTABLE'));
var theTB = theTable.tBodies.item(0);
var theTR = document.styleSheets[0].rules[0];
if ((theTR.style.display=="")||(theTR.style.display== "block"))
theTR.style.display="none";
else
theTR.style.display="block";
}
</script>
<BODY>

<table id="myTABLE" border="1" width="100" align="center" cellpadding="0"
cellspacing="0">

<tr id="TR1" class="block1">
<td width="50" id="TD11">1.1</td>
<td width="50" id="TD12">1.2</td>
</tr>
<div id="text">
<tr id="TR2" class="block">
<td width="50" id="TD21">2.1</td>
<td width="50" id="TD22">2.2</td>
</tr>

<tr id="TR3" class="block">
<td width="50" id="TD31">3.1</td>
<td width="50" id="TD32">3.2</td>
</tr>
</div>
</table>
<br><br>
<center><a href="javascript:toggle();">show/hide</a></center>

</BODY>
</HTML>
__________________________________________
"Thomas 'PointedEars' Lahn" <Po*********@nurfuerspam.de> wrote in message
news:41**************@PointedEars.de...

bruce wrote:

"Wang, Jay" <ou**********@fastmail.fm> wrote in message news:<ce**********@news.vanderbilt.edu>...

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link will toggle the style of the div section's style between BLOCK and NONE.
This technique works on normal text fine, but it doesn't work on part of the table, is there a solution that I can achieve the goal of turning on/off several rows all together? Thanks.
hey, try <SPAN> instead of <DIV>. [...]

Nonsense.

,-[HTML 3.2]
|
| <!ELEMENT table - - (caption?, tr+)>

,-[HTML 4.01 Transitional/Strict]
|
| <!ELEMENT TABLE - -
| (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

,-[XHTML 1.0 Transitional/Strict]
|
| <!ELEMENT table
| (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

,-[XHTML 1.1 Basic Table Module]
|
| <!-- table: Table Element .............................. -->
|
| <!ENTITY % table.element "INCLUDE" >
| <![%table.element;[
| <!ENTITY % table.content
| "( %caption.qname;?, %tr.qname;+ )"
| >
| <!ELEMENT %table.qname; %table.content; >
| <!-- end of table.element -->]]>

,-[XHTML 1.1 Table Module]
|
| <!-- table: Table Element .............................. -->
|
| <!ENTITY % table.element "INCLUDE" >
| <![%table.element;[
| <!ENTITY % table.content
| "( %caption.qname;?, ( %col.qname;* | %colgroup.qname;* ),
| (( %thead.qname;?, %tfoot.qname;?, %tbody.qname;+ ) | (

%tr.qname;+ | )))"
| >
| <!ELEMENT %table.qname; %table.content; >
| <!-- end of table.element -->]]>
PointedEars

[DU]

Wang, Jay wrote:

I try to group several rows in a table into a div and show/hide them by
click on a button somewhere with a javascript link. When clicked, the link
will toggle the style of the div section's style between BLOCK and NONE.

This technique works on normal text fine, but it doesn't work on part of the
table, is there a solution that I can achieve the goal of turning on/off
several rows all together? Thanks.

I have an entirely working cross-browser code for rows and rowgroups
collapsing at this url:

Dynamic table formatting for DOM 1 browsers
http://www10.brinkster.com/doctorunc...ormatting.html

Except for a particular bug in Opera 7.x regarding sequential order of
rows according to display logical order and not document order, the
script functions work very well in MSIE 6, NS 7.x, M-meleon 0.8.2,
Mozilla 1.4+, Opera 7.x.

DU