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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts

    expanding html tables

    hi all .. i trust you are all well

    Ok not to sure how to describe what Im after here but will give it my best go..

    I have a html table with 4 rows .. let say it looks like this ..

    ROW 1
    ROW 2
    ROW 3
    ROW 4

    now, i have some more rows which i want under those as this .

    ROW 1
    sub row 2
    sub row 2
    sub row 3
    sub row 4
    ROW 2
    sub row 2
    sub row 2
    sub row 3
    sub row 4
    ROW 3
    sub row 2
    sub row 2
    sub row 3
    sub row 4
    ROW 4
    sub row 2
    sub row 2
    sub row 3
    sub row 4

    I can do that, obviously easy in HTML .. however I want to use Java script to hid e the sub rows when the page loads initially.. then when they click each main row link with an OnClick event they get the sub rows expanded for each row..

    I have looked at using divs and hidding them and making them visiable on click however the problem is they are displayed on top of the other data on page.. i would like the table to expand to fit the rows.

    Anyone have any good links on this sort of thing, or any pointers?
    cheers,

    sir p

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You must nest your so called "subrows" in Tbodies

    table

    tbody
    row /row
    row /row
    row /row
    /tbody

    tbody
    row /row
    row /row
    row /row
    /tbody

    /table

    On the other hand, be careful, when using display, don't use display block, as it is not a standard value for table or table's elements (only IE will take it). use:

    tbodyelement.style.display="";
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    905
    Thanks
    23
    Thanked 5 Times in 5 Posts
    hi kor
    thanks for reply!

    umm little lost though,

    how exactly do i use tbody and tbodyelement.style.display="";?

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    oTbo;
    function 
    showhide(tbo){
    var 
    nextS=tbo;
    while(!
    nextS.nodeName||nextS.nodeName.toLowerCase()!='tbody'){
    nextS=tbo.nextSibling;
    }
    nextS.style.display=nextS.style.display=='none'?'':'none';
    }
    function 
    hideAll(){
    for(var 
    i=1;i<oTbo.length;i+=2){
    oTbo[i].style.display='none';
    }
    }
    onload=function(){
    oTbo=document.getElementsByTagName('tbody');
    hideAll();
    }
    </script>
    </head>
    <body>
    <table width="400" border="1" cellspacing="0" cellpadding="2">
    <!-- GROUP 1 -->
    <tbody>
    <tr> 
    <td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows1</td>
    </tr>
    </tbody>
    <tbody>
    <tr> 
    <td>1</td>
    <td>1</td>
    </tr>
    <tr> 
    <td>1</td>
    <td>1</td>
    </tr>
    <tr> 
    <td>1</td>
    <td>1</td>
    </tr>
    </tbody>
    <!-- // END GROUP 1 -->
    <!-- GROUP 2 -->
    <tbody>
    <tr> 
    <td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows2</td>
    </tr>
    </tbody>
    <tbody>
    <tr> 
    <td>2</td>
    <td>2</td>
    </tr>
    <tr> 
    <td>2</td>
    <td>2</td>
    </tr>
    <tr> 
    <td>2</td>
    <td>2</td>
    </tr>
    </tbody>
    <!-- // END GROUP 2 -->
    <!-- GROUP 3 -->
    <tbody>
    <tr> 
    <td colspan="2" onclick="showhide(this.parentNode.parentNode.nextSibling)">show/hide subrows3</td>
    </tr>
    </tbody>
    <tbody>
    <tr> 
    <td>3</td>
    <td>3</td>
    </tr>
    <tr> 
    <td>3</td>
    <td>3</td>
    </tr>
    <tr> 
    <td>3</td>
    <td>3</td>
    </tr>
    </tbody>
    <!-- // END GROUP 3 -->
    </table>

    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Kor,

    I know this thread is old, but I have been following it, and I am having difficulties. I have added images within the table "sub rows" and unfortunately it will pre-load all of them before it collapses. Is there any way to make the sub rows collapse before the images load, so they can either load once the first row is clicked or behind the scenes?

    Thank you,
    t


  •  

    Posting Permissions

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