Table with collapsing rows

Discussion in 'Javascript' started by alexyz, Nov 20, 2006.

  1. alexyz

    alexyz Guest

    Hi everyone,
    I write a simple javascript to expand / collapse some rows of a table.
    The problem is that when I click more than one time the link to expand
    /collapse the rows I get an unwanted extra space after such rows.
    Can anyone help me to solve the problem (I use Firefox to test this
    code)?
    Here there is the sample code:

    <html>
    <head>
    <script type="text/javascript">
    function setTableRowClass(currentNode){
    // get child nodes of tbody tag
    var rowToHide =
    currentNode.parentNode.parentNode.parentNode.childNodes;
    var aux = 0;
    for(var j = 0; j < rowToHide.length; j++)
    if(rowToHide[j].tagName == 'TR')
    if(aux == 0)
    aux = 1; //skip the first 'tr' tag with the link 'Hide details'
    else
    if(rowToHide[j].style.display == 'none')
    rowToHide[j].style.display = 'block'; // show
    else
    rowToHide[j].style.display = 'none'; // hide
    return false;
    }
    </script>
    </head>
    <body>
    <table style="{border-style: solid;}">
    <tbody>
    <tr>
    <td>
    <a href="#" onclick="return setTableRowClass(this);">Click for
    details 1</a>
    </td>
    </tr>
    <tr style="display: none;"><td>Details 1</td></tr>
    <tr style="display: none;"><td>Details 2</td></tr>
    <tr style="display: none;"><td>Details 3</td></tr>
    </tbody>
    <tbody>
    <tr>
    <td>
    <a href="#" onclick="return setTableRowClass(this);">Click for
    details 2</a>
    </td>
    </tr>
    <tr style="display: none;"><td>Details 4</td></tr>
    <tr style="display: none;"><td>Details 5</td></tr>
    <tr style="display: none;"><td>Details 6</td></tr>
    </tbody>
    </table>
    </body>
    </html>

    Thanks

    Bye,
    Alessandro
    alexyz, Nov 20, 2006
    #1
    1. Advertising

  2. alexyz wrote:


    > if(rowToHide[j].style.display == 'none')
    > rowToHide[j].style.display = 'block'; // show


    Set the inline display style to '' to show, not to 'block'. Or set to
    'table-row', as that is the proper CSS 2 value for table row elements.
    Only IE 5/6 do not support that so setting to '' where the default
    stylesheet of the browser kicks in is safer.






    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Nov 20, 2006
    #2
    1. Advertising

  3. alexyz

    alexyz Guest

    Martin Honnen wrote:
    >
    > Set the inline display style to '' to show, not to 'block'. Or set to
    > 'table-row', as that is the proper CSS 2 value for table row elements.
    > Only IE 5/6 do not support that so setting to '' where the default
    > stylesheet of the browser kicks in is safer.
    >



    Thanks a lot Martin ! I waste a lot of time to try to fix this problem.

    Bye,
    Alessandro
    alexyz, Nov 20, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    954
    Dave Pollum
    Mar 17, 2006
  2. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,193
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  3. PJ6
    Replies:
    2
    Views:
    730
  4. Rio
    Replies:
    4
    Views:
    1,172
  5. jc
    Replies:
    1
    Views:
    121
    Evertjan.
    Jun 30, 2009
Loading...

Share This Page