how to Hide TABLE rows by grouping them into DIV?

W

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

Martin Honnen

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

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

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

martin

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

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

bruce

Wang said:
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.
 
T

Thomas 'PointedEars' Lahn

bruce said:
Wang said:
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
 
W

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 said:
bruce said:
"Wang, Jay" <[email protected]> wrote in message
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
 
D

DU

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/doctorunclear/HTMLJavascriptCSS/DynamicTableFormatting.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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top