View Full Version : style.display problem when traversing the DOM

10-05-2004, 05:51 PM
For my print script I need to expand some tables which are not visible (style.display = 'none'). When I go through my site using this script:

var allTables = document.body.getElementsByTagName("TABLE");
for (i=0; i < allTables.length; i++) {
if (allTables[i].style.display == 'none') {

the tables don't show up...
Even when I use TR instead of TABLE in this script they won't show.
An example of the page I'm working on can be found here:

This example shows 1 table, but in reallity it can be 10 tables. So I cannot use their ID.

Can anyone give me a hint on how to show these tables?
Dynamicaly adding a stylesheet won't work either (CSS media)...


10-06-2004, 07:02 AM
Are you saying to can't use print stylesheets?

10-06-2004, 10:29 AM
That's right.
I can't use a print stylesheet unfortunately.

But isn't it strange that when traversing through the DOM of my document and setting all display=none to display='' the hidden objects don't show up.

10-06-2004, 07:41 PM
did you get your example working? It works in IE but not in Fx :-\
although.. I think the newer versions of Fx(1.x) are simulating document.all

10-06-2004, 11:31 PM
The style object only exposes properties which are defined in style attributes. But yours are in an external stylesheet, and therefore aren't in the style object.

The answer is to use DOM 2 CSS (plus some proprietary junk so it works in IE). These are the properties you want:

document.defaultView.getComputedStyle(allTables[i], '').getPropertyValue('display'); //the standard method

allTables[i].currentStyle('display'); //IE's method

You can use a typeof discriminator on document.defaultView to test for support.

10-07-2004, 12:00 AM
The tables have to be on the page before you check for their existence. Either place the script after the tables, or use window.onload = funcName;. And remove body...

this works in IE or FF:

<script type="text/javascript">

function getDisplay(){
var tables = document.getElementsByTagName("table");
for(var i=0;i<tables.length;i++){
if (tables[i].style.display == "none") {
tables[i].style.display = "block";
window.onload = getDisplay;


<table border="1" style="display:none;">
<br />
<table border="1" style="display:none;">
<br />
<table border="1" style="display:none;">


10-07-2004, 11:45 AM
I use a seperate print function (onclick event from a button) to print all tables. So the tables are already loaded.

The solution though was simple, but costed me 1,5 day to find... :-(
Below the table I used javascript to collapse (set display=none via javascript) it, but I did it on the TBODY element. When setting the display='' (or block) on the TABLE and / or TR elements the table doesn't show up because of the display property of the TBODY element.
I use display='' because I thought display='block' is not really valid for table elements...

Also, the DIV's are illegal between the TR tags in a table. This I tryed to use to be able to hide parts of a table. Which means I have to use stylesheets to do this. Then brothercake's solution can be helpfull.

All thanx for your help so far.