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 Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple solution to collapsible rows

    I have been looking around for quite some time for a simple piece of code that allows rows to be collapsed in tables, so when you click on a link in the tbale the row beneath collapses. All i have found are very complex codes that i cant get to work or that dont work in both IE and FF.

    If someone could point me in the right direction on how to make it myself by using a simple javascript based method that would be great

  • #2
    New Coder
    Join Date
    Jun 2005
    Location
    Scotland
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    make the <tr> you want hidden have the attribute
    Code:
    <tr style="display:none">
    (or do it in your CSS).

    Then put an "onmousedown" type event for the link, calling a function (with the parameter holding the tr id, i.e.
    Code:
    onmousedown="showHideRow('row1')
    Then for the function write:
    Code:
    function showHideRow(rowId) {
      row = document.getElementById(rowId)
      if (row.style.display=="block") 
        row.style.display="none";
      else
        row.style.display="block";
      }
    }
    Hope that helps!

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Or more efficient
    Code:
    function showHideRow(rowId) {
    row = document.getElementById(rowId)
    row.style.display = (row.style.display == 'block')? 'none' : 'block';
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jun 2005
    Location
    Scotland
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh, that syntax has always been a pet hate of mine... I prefer code readable rather than efficient.

  • #5
    New Coder
    Join Date
    Jun 2006
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks alot its all workin good, very simple piece of code as well

  • #6
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    SHowing a table row should use "table-row" for Mozilla and "block" for IE. Simple try catch will allow you to do it.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #7
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Or more efficient
    Code:
    function showHideRow(rowId) {
    row = document.getElementById(rowId)
    row.style.display = (row.style.display == 'block')? 'none' : 'block';
    }
    Just to clarify, this is only effiency in terms of how much you code versus what it does. This does NOT process more quickly than the simple conditional statement.

    Though, one could argue you save a few bytes of data transfer when sending over the JS file since the code is slightly smaller, but you only feel that once on page load, not during execution of the code.


  •  

    Posting Permissions

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