473,395 Members | 1,678 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,395 software developers and data experts.

how to Hide TABLE rows by grouping them into DIV?

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


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
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
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
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
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
"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
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
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
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 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: KathyB | last post by:
Hi, I'm trying to get the following script to work, but I'm getting an error saying "rowID is undefined". function showhide(rowId) { var showRow = "Edit_" + rowID var hideRow = "View_" + rowID...
2
by: Mark | last post by:
Hi, I need to be able to have five different links and when when someone clicks to show row 2, row 1 automatically hides. Right now all i can figure out is a link that will show but then you...
5
by: Marek Mänd | last post by:
Please explain to a experienced fool like me, how to hide table rows correctly at this case. http://marekmand.kuubik.ee/iebug_canthide_table_rows_properly.htm Click on the header "label" and see...
3
by: AR | last post by:
Hi, How can I hide table rows? ... tried with the following example: FireFox works... How to do the simillar in IE6? <html> <head> <script language="javascript"> function hide_row() { var v...
1
by: RA | last post by:
Hi I want to have a FAQ so that when the user clicks the question the answer will be shown below the questions. How do I do it? I use c# with asp.net. Thanks
1
by: shankwheat | last post by:
I'm creating a dynamic table with asp and I would like to add a "Show All" and "Collapse All" feature to show/hide certain rows within the table. This code works well for showing/hiding one row at...
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...
1
by: jbreaker | last post by:
Hi - I have a table with about 30 rows, which contain a checkbox and a bit of text each. What I'm trying to find a way to do is to have 2 buttons at the bottom of the page - HIDE & SHOW. When the...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.