473,721 Members | 2,217 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

hiding table rows with javascript and css

Hi,

I am trying to show/hide a group of table rows using javascript and CSS. if
I group them in a <tbody> element I can do:

my_tbody_elemen t.style.display ="none";

to hide them and

my_tbody_elemen t.style.display ="block";

to show them. This works in IE but doesn't work in css-compliant browsers,
because these use "table-row-group" instead (which IE doesn't support). I
have tried setting the style to "" or "default" but this doesn't work
either.

is there a simple cross-browser solution to this, or do I have to detect
which browser is in use?

TIA

Andy
Jul 23 '05 #1
8 2512


Andy Fish wrote:

I am trying to show/hide a group of table rows using javascript and CSS. if
I group them in a <tbody> element I can do:

my_tbody_elemen t.style.display ="none";

to hide them and

my_tbody_elemen t.style.display ="block";

to show them.


It should suffice to set
my_tbody_elemen t.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
> > my_tbody_elemen t.style.display ="block";

Its working in IE because IE does not care about CSS2.
In the above code display value should be set as 'table-row' for CSS2
compliant browsers and 'block' for IE.

See fully working function below:

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";
var obj = document.getEle mentById(tbody) ;
obj.style.displ ay = (obj.style.disp lay != "none")? "none" : displayVal
;
}

Tested in NS7 and IE6.

- Kiran Makam

Jul 23 '05 #3
Kiran Makam wrote:
> my_tbody_elemen t.style.display ="block";
<snip> function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row"; <snip> Tested in NS7 and IE6.


But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.

Richard.
Jul 23 '05 #4

"Richard Cornford" <Ri*****@litote s.demon.co.uk> wrote in message
news:cs******** ***********@new s.demon.co.uk.. .
Kiran Makam wrote:
> my_tbody_elemen t.style.display ="block";
<snip>
function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>
Tested in NS7 and IE6.


But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.


Well I guess there is no such thing as a guaranteed cross-browser solution
when you're dealing with something like IE that is not standards-compliant.

After some more hunting, I found a solution which I'm pretty sure is
standard CSS but works in IE as well.

<style>
tbody.on { display:table-row-group; }
tbody.off { display:none; }
</style>

<script>
if (something) {
my_tbody_elemen t.className = "on";
} else {
my_tbody_elemen t.className = "off";
}
</script>

Andy

Richard.

Jul 23 '05 #5
"Andy Fish" <aj****@blueyon der.co.uk> wrote in message
news:vL******** **********@text .news.blueyonde r.co.uk...

"Richard Cornford" <Ri*****@litote s.demon.co.uk> wrote in message
news:cs******** ***********@new s.demon.co.uk.. .
Kiran Makam wrote:
> my_tbody_elemen t.style.display ="block";

<snip>
function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>
Tested in NS7 and IE6.


But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementing document.all is IE has not been valid for many years
now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.


Well I guess there is no such thing as a guaranteed cross-browser
solution when you're dealing with something like IE that is not
standards-compliant.


You are correct, there is no such thing as a guaranteed cross-browser
solution, but for the wrong reason. The problem is that some browsers
may not have a Style object as a property of each HTML element, or it
may support the Style object as a property but may not dynamically
update the screen when Style properties are changed via script.

However, the types of problems outlined above are not what you are
referring to. You want a simple solution that will allow you to
change -display- property of a TBODY from "none" back to the default
state (table-row-group), but IE does not support a -display- property
value of "table-row-group".

So, the solution is what Martin told you, and Richard referred you to
that solution.

The only possibility is that Martin's post did not appear on your news
server. In that case, I'll quote Martin's original post:

It should suffice to set
my_tbody_elemen t.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

So the solution is to set TBODY.style.dis play = ""; (empty string). This
will result in the HTML element displaying it's content using the
default display mechanism for that element (block for <div>, inline for
<span>, table-row-group for <tbody>, etc).

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq
Jul 23 '05 #6
I do this sort of thing:

stylesheet:
..hidden {
display: none;
}

script:
my_tbody_elemen t.className="hi dden";
my_tbody_elemen t.className="";
I believe this is cross-browser. It is slightly more complicated if
there are other classes present. In this case I have these functions
to add and remove classes:

function add_class(e,c) {
e.className=e.c lassName+" "+c;
}

function remove_class(e, c) {
cn=e.className;
p=cn.indexOf(c) ;
e.className=cn. substr(0,p)+cn. substr(p+c.leng th);
}
--Phil.

Jul 23 '05 #7
DU
Grant Wagner wrote:
"Andy Fish" <aj****@blueyon der.co.uk> wrote in message
news:vL******** **********@text .news.blueyonde r.co.uk...
"Richard Cornford" <Ri*****@litote s.demon.co.uk> wrote in message
news:cs****** *************@n ews.demon.co.uk ...
Kiran Makam wrote:

>> my_tbody_elemen t.style.display ="block";

<snip>

function toggle(tbody){
var displayVal = (document.all)? "block" : "table-row";

<snip>

Tested in NS7 and IE6.

But testing in Opera, Safari, Konqueror or IceBrowser would have
revealed how limited this approach is. The assumption that a browser
implementi ng document.all is IE has not been valid for many years
now.

I would go along with Martin Honnen in this an use a technique that
works cross-browser.
Well I guess there is no such thing as a guaranteed cross-browser
solution when you're dealing with something like IE that is not
standards-compliant.

You are correct, there is no such thing as a guaranteed cross-browser
solution, but for the wrong reason. The problem is that some browsers
may not have a Style object as a property of each HTML element, or it
may support the Style object as a property but may not dynamically
update the screen when Style properties are changed via script.


Also, it may support a css2 property but not entirely and there is no
way to verify/know this with javascript. E.g.: visibility = collapse.
Opera support documentation claims to support visibility collapse for
rows, columns, rowgroups and column groups but it does not according to
CSS2.1.
However, the types of problems outlined above are not what you are
referring to. You want a simple solution that will allow you to
change -display- property of a TBODY from "none" back to the default
state (table-row-group), but IE does not support a -display- property
value of "table-row-group".

So, the solution is what Martin told you, and Richard referred you to
that solution.

The only possibility is that Martin's post did not appear on your news
server. In that case, I'll quote Martin's original post:

It should suffice to set
my_tbody_elemen t.style.display = "";
if all display to none settings are done with script as you have above.
Only if you had style rules in a style sheet e.g.
tbody { display: none; }
the script setting the inline style
style.display = "";
could not show the element as an empty inline style obviously doesn't
override a style rule.

So the solution is to set TBODY.style.dis play = ""; (empty string). This
will result in the HTML element displaying it's content using the
default display mechanism for that element (block for <div>, inline for
<span>, table-row-group for <tbody>, etc).


Personally, I first use visibility = collapse for Mozilla-based browsers.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.5 :)
Jul 23 '05 #8
*Andy Fish* <aj****@blueyon der.co.uk>:

I am trying to show/hide a group of table rows using javascript and CSS.
The correct CSS way would be "visibility : collapse":
<http://www.w3.org/TR/CSS2/tables.html#dyn amic-effects>. I've never tried
that and doubt it's well supported, though.
my_tbody_elemen t.style.display ="none";
my_tbody_elemen t.style.display ="block";
IMO the best way of the JS part is a dynamically assigned class, not
'.style'. That's true for almost any JS-CSS interaction, a.k.a. "DHTML".
See <http://webdesign.criss ov.de/Scripting/modifyClass.js> for some basic
functions/methods for that.
This works in IE but doesn't work in css-compliant browsers, because
these use "table-row-group" instead


tbody.show {display: block; display: table-row-group;}
tbody.hide {display: none;}

Switch¹ between those classes (if the aforementioned method indeed does
not work). It /should/ work and is at least better than JS browser filters.

--
"Music is essentially useless, as life is."
George Santayana
Jul 23 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
8987
by: Rick Measham | last post by:
I have a set of data that I display in a table. Each row has a category and there may be a dozen or more rows in the same category. I'm looking to add filter buttons to the page to hide/show categories on the fly. Currently I can: Set the id on the tr to (category name) or to (category name.data id). Using the first, is there a way to hide all rows with that same id? It seems currently to only hide the first row with that id.
8
23995
by: F. Da Costa | last post by:
Following is a snippet of html in which I hide a whole table and try to hide a single row. Here is my question (plz don't chew my head off if its css related instead): Why does the divTable <div> Hide/Show work but not the divRow version? What I'm trying to do here is simultaneously hide 1 or more rows (possibly with nested divs as well). This would allow for an elegant an well performing base for an html base treetable (but I guess...
2
15056
by: Andy Fish | last post by:
Hi, I am trying to show/hide a group of table rows using javascript and CSS. if I group them in a <tbody> element I can do: my_tbody_element.style.display="none"; to hide them and my_tbody_element.style.display="block";
5
1544
by: mt | last post by:
In a nutshell, I'd like to have a list of items, each of which fills out a small table which displays some info about a particular item(the items being a trouble ticket for a tech support ASP-built web-based app). There may be zero, one, or many of these per ticket. Since some tickets have many of these items (call them work items), the page can get awful long. I have this part working already. So my proposed solution to make the pages...
1
553
by: luvdairish | last post by:
Can someone please look at my code and see why tables are not hiding properly? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <SCRIPT type=text/javascript> <!--//
5
2171
by: Ben | last post by:
I have a form for data entry which is in a table. I have a select box to enter a customer name, which takes it's options from the customer database. I have a button to add a new customer. What I want is for the relevant customer fields to magically appear underneath the selelect box when the "add customer button" is pressed. For some reason my code is NOT working. Have been trying to do it with div tags and style sheets using a...
6
1992
by: Roy | last post by:
Since a datagrid is just an html table anyways, this seems like it should be easy but it's giving me a hard time. In ItemDataBound sub I'm trying to kick off javascript code using response.write(). The javascript code is contained within an IF block and if e.Item.Cells(0).Text = myVariable then the row gets hidden. A user can still view those rows later with a buttonclick. Only problem is, I aside from what I've described above, I...
1
1856
by: Fix_Metal | last post by:
Hello all. I'm new to this group :) I have a problem with javascript language. I'm making an .asp page with some integrated Javascript functions. The page consists of some HTML selects and a table. The table is obviously populated from a database :) so it is dynamic. The database contains a field containing some names. This field is not a PK, thus the names can be repeated very easily). I want the user to be able to see all the rows...
2
3619
by: chris f | last post by:
I have an ASP.NET 2 web page that dynamically populates an ASP table in the Page_Load event. Rows relate to different people and I want to let the user display only rows for a particular person when they select them from a dropdown list on the same page. (Each row has a hidden PersonId column.) The page initially shows the rows for all people. Is it possible to hide the rows for the other people when the user selects a person from the...
0
8738
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9376
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9234
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9150
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9086
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8028
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4501
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4762
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2599
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.