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

how to Hide TABLE rows by grouping them into DIV?

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

Jul 23 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a


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/

Jul 23 '05 #2

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

Jul 23 '05 #3

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

Jul 23 '05 #4

P: n/a
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 .
Jul 23 '05 #5

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

Jul 23 '05 #6

P: n/a
"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.
Jul 23 '05 #7

P: n/a
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
Jul 23 '05 #8

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

Jul 23 '05 #9

P: n/a
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
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.