Best way to hide table rows?

Discussion in 'HTML' started by John Dalberg, Nov 2, 2004.

  1. John Dalberg

    John Dalberg Guest

    What's the best way to hide a bunch of rows in sequence of a table that
    works properly across different browsers?

    John Dalberg
    John Dalberg, Nov 2, 2004
    #1
    1. Advertising

  2. John Dalberg

    brucie Guest

    In alt.html John Dalberg said:

    > What's the best way to hide a bunch of rows in sequence of a table that
    > works properly across different browsers?


    don't put them in the table until needed using a server side process or
    as second best tr{display:none;} but browser support varies.

    --
    t h e o f l i t t l e v o i c e s
    brucie, Nov 2, 2004
    #2
    1. Advertising

  3. John Dalberg

    rf Guest

    John Dalberg

    > What's the best way to hide a bunch of rows in sequence of a [table that
    > works properly across different browsers]?


    Most tables already work proberly across different browsers.

    <td style="display: none;">...
    <td style="display: none;">...

    --
    Cheers
    Richard.
    rf, Nov 2, 2004
    #3
  4. John Dalberg

    John Dalberg Guest

    On Tue, 02 Nov 2004 00:53:27 GMT, rf wrote:

    > John Dalberg
    >
    >> What's the best way to hide a bunch of rows in sequence of a [table that
    >> works properly across different browsers]?

    >
    > Most tables already work proberly across different browsers.
    >
    > <td style="display: none;">...
    > <td style="display: none;">...


    I need to hide a set of of rows in one Javascript statementdepending on a
    criteria being selected in a form.

    Something like below doesn't work. Changing the display style for MyRows to
    none has no effect.


    .....
    <div id="MyRows">
    <tr>... </tr>
    <tr>....</tr>
    <tr>....</tr>
    </div>

    John Dalberg
    John Dalberg, Nov 2, 2004
    #4
  5. John Dalberg

    John Dalberg Guest

    On Tue, 2 Nov 2004 10:48:00 +1000, brucie wrote:

    > In alt.html John Dalberg said:
    >
    >> What's the best way to hide a bunch of rows in sequence of a table that
    >> works properly across different browsers?

    >
    > don't put them in the table until needed using a server side process or
    > as second best tr{display:none;} but browser support varies.


    The rows are part of a form and I want to hide/unhide a section using
    client side script depending on criteria selected.

    John Dalberg
    John Dalberg, Nov 2, 2004
    #5
  6. John Dalberg

    Mark Parnell Guest

    On Mon, 1 Nov 2004 20:28:48 -0800, John Dalberg <>
    declared in alt.html:

    > I need to hide a set of of rows in one Javascript statementdepending on a
    > criteria being selected in a form.


    Well if you *need* it, then Javascript isn't the answer. Client side
    script cannot be relied on.

    Plus you should have mentioned this in your OP, so the answers might
    have been a bit more relevant.

    > Something like below doesn't work.


    Of course not. You can't put <tr>s in a <div>. Didn't the validator tell
    you that?

    You would have to assign each <tr> an id, and apply the style to each.
    But as brucie said, browser support will vary - probably even more so
    when attempting to do it dynamically. Even if the browser does allow it
    the whole page is going to jump around.

    You would be better off describing the actual problem, rather than the
    perceived solution. Then maybe we can suggest a better way to achieve
    what it is you are trying to do.

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
    Mark Parnell, Nov 2, 2004
    #6
  7. John Dalberg

    rf Guest

    John Dalberg wrote:
    > On Tue, 02 Nov 2004 00:53:27 GMT, rf wrote:
    >
    > > John Dalberg
    > >
    > >> What's the best way to hide a bunch of rows in sequence of a [table

    that
    > >> works properly across different browsers]?

    > >
    > > Most tables already work proberly across different browsers.
    > >
    > > <td style="display: none;">...
    > > <td style="display: none;">...

    >
    > I need to hide a set of of rows in one Javascript statementdepending on a
    > criteria being selected in a form.


    You didn't say that.

    > Something like below doesn't work. Changing the display style for MyRows

    to
    > none has no effect.


    > ....
    > <div id="MyRows">
    > <tr>... </tr>
    > <tr>....</tr>
    > <tr>....</tr>
    > </div>


    Of course this won't work. It's invalid HTML. The only thing that can be
    inside a <table> is <thead>,<tbody>,<tr>. Most certainly not a div. The
    browser is probably error correcting it away.

    <tbody id="myrows">
    <tr> ... </tr>
    <tr> ... </tr>
    <tr> ... </tr>
    </tbody>

    Don't mix case, one day it *will* bite you.

    --
    Cheers
    Richard.
    rf, Nov 2, 2004
    #7
  8. John Dalberg

    John Dalberg Guest

    On Tue, 2 Nov 2004 15:48:29 +1100, Mark Parnell wrote:

    > On Mon, 1 Nov 2004 20:28:48 -0800, John Dalberg <>
    > declared in alt.html:
    >
    >> I need to hide a set of of rows in one Javascript statementdepending on a
    >> criteria being selected in a form.

    >
    > Well if you *need* it, then Javascript isn't the answer. Client side
    > script cannot be relied on.
    >
    > Plus you should have mentioned this in your OP, so the answers might
    > have been a bit more relevant.
    >
    >> Something like below doesn't work.

    >
    > Of course not. You can't put <tr>s in a <div>. Didn't the validator tell
    > you that?
    >
    > You would have to assign each <tr> an id, and apply the style to each.
    > But as brucie said, browser support will vary - probably even more so
    > when attempting to do it dynamically. Even if the browser does allow it
    > the whole page is going to jump around.
    >
    > You would be better off describing the actual problem, rather than the
    > perceived solution. Then maybe we can suggest a better way to achieve
    > what it is you are trying to do.


    I did some more research and found one method if anyone is interested.

    <body>
    <style type="text/css">
    /*
    IE 5.5 does not actually support "table-row-group"
    only "table-header-group" and "table-footer-group"
    but I've found the following CSS renders correctly
    */
    tbody.on { display:table-row-group; }
    tbody.off { display:none; }
    </style>
    <script type="text/javascript">
    function toggleTbody(id) {
    if (document.getElementById) {
    var tbod = document.getElementById(id);
    if (tbod && typeof tbod.className == 'string') {
    if (tbod.className == 'off') {
    tbod.className = 'on';
    } else { tbod.className = 'off';
    }
    }
    } return false;
    }
    </script>
    <a href="#" onclick="return toggleTbody('two');">Toggle tbody two</a>
    <table>
    <tbody id="one">
    <tr>
    <td>One</td><td>One</td><td>One</td>
    </tr>
    <tr>
    <td>One</td><td>One</td><td>One</td>
    </tr>
    <tr>
    <td>One</td><td>One</td><td>One</td>
    </tr>
    </tbody>
    <tbody id="two">
    <tr>
    <td>Two</td><td>Two</td><td>Two</td>
    </tr>
    <tr>
    <td>Two</td><td>Two</td><td>Two</td>
    </tr>
    <tr>
    <td>Two</td><td>Two</td><td>Two</td>
    </tr>
    </tbody>
    <tbody id="three">
    <tr>
    <td>Three</td><td>Three</td><td>Three</td>
    </tr>
    <tr>
    <td>Three</td><td>Three</td><td>Three</td>
    </tr>
    <tr>
    <td>Three</td><td>Three</td><td>Three</td>
    </tr>
    </tbody>
    </table>
    John Dalberg, Nov 2, 2004
    #8
  9. On Mon, 1 Nov 2004 21:34:23 -0800, John Dalberg <>
    wrote:

    [snip]

    > <style type="text/css">
    > /*
    > IE 5.5 does not actually support "table-row-group"
    > only "table-header-group" and "table-footer-group"
    > but I've found the following CSS renders correctly
    > */
    > tbody.on { display:table-row-group; }


    Yes, because user agents must ignore declarations that contain values it
    doesn't understand. Earlier IE versions would treat that as:

    tbody.on { }

    As the rule below wouldn't apply when the TBODY's class is "on", the
    display property will return to its default.

    > tbody.off { display:none; }


    [snip]

    > function toggleTbody(id) {
    > if (document.getElementById) {
    > var tbod = document.getElementById(id);
    > if (tbod && typeof tbod.className == 'string') {
    > if (tbod.className == 'off') {
    > tbod.className = 'on';
    > } else { tbod.className = 'off';
    > }
    > }
    > } return false;
    > }


    An alternative is:

    /* One-time code that makes a call to document.getElementById
    * always sensible.
    *
    * This is very basic; an more involved version allows the use of
    * the document.all collection to obtain element references, but
    * as hiding TBODY elements wasn't allowed until IE 5, when
    * document.getElementById was also introduced, the extra code is
    * of no use in this case.
    */
    if('function' != typeof document.getElementById) {
    document.getElementById = function() {return null;};
    }

    function toggleTbody(id) {
    var tbod = document.getElementById(id);
    if(tbod) {
    (tbod = (tbod.style || tbod)).display
    = (tbod.display == 'none') ? '' : 'none';
    }
    return false;
    }

    This renders the styles from the original unnecessary. It also enforces an
    important issue: the relevant TBODY elements *must* be visible by default.

    You can hide them when the document is loaded, but it should be done by
    the script, and *not* by CSS. The reason is that if the script can hide
    the element, it can show it again. The only way this can be guaranteed
    with CSS is if the user can disable CSS page-wide, and the user probably
    won't know either how to do that, or even that it's necessary.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Nov 2, 2004
    #9
  10. John Dalberg

    Adrienne Guest

    Gazing into my crystal ball I observed John Dalberg <>
    writing in news:1mbexadqegu2$.m01hn0lvddng$:

    > On Tue, 2 Nov 2004 10:48:00 +1000, brucie wrote:
    >
    >> In alt.html John Dalberg said:
    >>
    >>> What's the best way to hide a bunch of rows in sequence of a table that
    >>> works properly across different browsers?

    >>
    >> don't put them in the table until needed using a server side process or
    >> as second best tr{display:none;} but browser support varies.

    >
    > The rows are part of a form and I want to hide/unhide a section using
    > client side script depending on criteria selected.
    >
    > John Dalberg


    The best way to do what you want is server side, not client side. Have the
    form submit to itself, and depending on criteria, then show the elements,
    for example (ASP):

    <label for="choice">Choice:</label>
    <select name="choice" id="choice">
    <option value="1" <%if request.form("choice") = "1" then%>selected<%end
    if%>>One</option>
    <option value="2" <%if request.form("choice") = "2" then%>selected<%end
    if%>>Two</option>
    </select>
    <p><input type="submit" value="Submit" name="submit"></p>
    <% if request.form("choice") = "1" then%>
    <label for="something">Something: </label>
    <input type="text" name="something" id="something">
    <% elseif request.form("choice") = "2" then%>
    <label for="else">Else: </label>
    <textarea id="else" name="else" rows="5" cols="20">
    </textarea>
    <% end if%>


    --
    Adrienne Boswell
    Please respond to the group so others can share
    Adrienne, Nov 2, 2004
    #10
    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. RA
    Replies:
    1
    Views:
    3,946
  2. David
    Replies:
    4
    Views:
    5,939
    Vidar Petursson
    May 21, 2004
  3. Rio
    Replies:
    4
    Views:
    1,166
  4. Replies:
    1
    Views:
    245
    bruno at modulix
    Apr 7, 2006
  5. VijayRama
    Replies:
    2
    Views:
    2,282
    Gregory A. Beamer
    Oct 12, 2009
Loading...

Share This Page