Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to Hide TABLE rows by grouping them into DIV?

Reply
Thread Tools

how to Hide TABLE rows by grouping them into DIV?

 
 
Wang, Jay
Guest
Posts: n/a
 
      07-28-2004
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.



 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      07-28-2004


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/

 
Reply With Quote
 
 
 
 
Carl Smotricz
Guest
Posts: n/a
 
      07-28-2004
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.
>
>
>

 
Reply With Quote
 
Grant Wagner
Guest
Posts: n/a
 
      07-28-2004
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 <(E-Mail Removed)>
comp.lang.javascript FAQ - http://jibbering.com/faq

 
Reply With Quote
 
martin
Guest
Posts: n/a
 
      07-29-2004
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 .
 
Reply With Quote
 
Wang, Jay
Guest
Posts: n/a
 
      07-29-2004
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" <(E-Mail Removed)> wrote in message
news:4107bd2b$(E-Mail Removed)...
>
>
> 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/
>



 
Reply With Quote
 
bruce
Guest
Posts: n/a
 
      07-29-2004
"Wang, Jay" <(E-Mail Removed)> wrote in message news:<ce8ce5$kt1$(E-Mail Removed)>...
> 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.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      07-29-2004
bruce wrote:
> "Wang, Jay" <(E-Mail Removed)> wrote in message news:<ce8ce5$kt1$(E-Mail Removed)>...
>> 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
 
Reply With Quote
 
Wang, Jay
Guest
Posts: n/a
 
      07-29-2004
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> bruce wrote:
> > "Wang, Jay" <(E-Mail Removed)> wrote in message

news:<ce8ce5$kt1$(E-Mail Removed)>...
> >> 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



 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      08-02-2004
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
Hide the Gridview Rows and Header rows in Button click VijayRama ASP .Net 2 10-12-2009 01:58 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
trying to use <div> to hide a bunch of table rows David ASP .Net 4 05-21-2004 10:15 AM
How to hide table rows and show them when user click a different row? RA ASP .Net 1 02-19-2004 10:53 PM



Advertisments