Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Location
    NL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    style.display problem when traversing the DOM

    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') {
    allTables[i].style.display='';
    }
    }

    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:
    http://www.britec.nl/ee/temp.htm

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

    RB

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Are you saying to can't use print stylesheets?

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Location
    NL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:


    PHP Code:
    <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;

    //-->
    </script>




    <table border="1" style="display:none;">
    <tr>
    <td>&nbsp;</td></tr></table>
    <br />
    <table border="1" style="display:none;">
    <tr>
    <td>&nbsp;</td></tr></table>
    <br />
    <table border="1" style="display:none;">
    <tr>
    <td>&nbsp;</td></tr></table> 

    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #7
    New to the CF scene
    Join Date
    Oct 2004
    Location
    NL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    RB
    Last edited by rvandenb; 10-07-2004 at 10:48 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •