www.webdeveloper.com
Results 1 to 7 of 7

Thread: Hiding Table Rows

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700

    Hiding Table Rows

    I need to switch on or off whole table rows.

    In IE, this does the job...

    HTML Code:
    <tr id='slct' style='display:block'>
        <td>Title</td>
        <td>Something Else</td>
    </tr>
    I can switch that row on or off using document.getElementById('slct').style.display = "block" / "none".

    However, In Firefox, Safari and Chrome, the table row loses its table formatting... that is... I can make the row appear and disappear, but when it appears, the column formatting is gone and the column contents appear as a single left justified block.

    Any suggestions?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use display:table-row; for conforming browsers.
    http://www.w3.org/TR/CSS2/tables.html#q2

  3. #3
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Thanks Fang.

    "Conforming Browsers". Not in my lifetime I suspect.

    I changed the script as per the w3.org specification as follows;

    HTML Code:
    <tr id='slct' style='visibility:visible'>
        <td>Title</td>
        <td>Something Else</td>
    </tr>
    with document.getElementById('slct').style.visibility = "visible" / "collapse" changing the status.

    Now it works in Firefox and no longer works in IE so I'll handle both in the code.

    Safari/Chrome half works, but unless anyone has further suggestions, users of those will just have to put up with "collapse" not collapsing the table around the rows that are being hidden.

    Cheers
    CTB

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    What is the javascript code you are using?
    I use display and change it from display = none to display = '' (empty string).

  5. #5
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    On server side, I detect the user agent and output either for either 'IE' or 'Anything Else' as follows. It seemed more efficient to do it there than do it in javascript on the client.

    Code:
    //output for Internet Explorer
       function selectit()
      {
         tp = document.getElementById('mctype').value;
         if (tp=="D")
         {
             document.getElementById('slct').style.display = "block";
          }
          else
          {
             document.getElementById('slct1').style.display = "none";
          }
       }
    
    //output for anything else
       function selectit()
      {
         tp = document.getElementById('mctype').value;
         if (tp=="D")
         {
             document.getElementById('slct').style.visibility= "visible";
          }
          else
          {
             document.getElementById('slct1').style.visibility= "collapse";
          }
       }
    On doing more research, it appears that Opera based browsers (Opera, Safari, Chrome) are not built to the latest compliance standard. At least they have the courtesy to hide the row on 'collapse'.

    Cheers
    CTB

  6. #6
    Join Date
    Mar 2007
    Posts
    946
    What is the point of tp and why are you changing the style on two different id depending on the condition?

    If you have a button to show hide a row then why not do this

    PHP Code:
    myid document.getElementById('my_specific_id');

    if (
    myid.style.display == 'none') {
      
    myid.style.display '';
    } else {
      
    myid.style.display 'none';


  7. #7
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    1) You're better off swapping classNames than adjusting the style object.
    2) This looks lik a job for the ternary operator.
    Code:
    document.getElementById('my_specific_id').className = document.getElementById('my_specific_id').className == 'hide' ? 'show' : 'hide'
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles