how to Hide TABLE rows by grouping them into DIV?

Discussion in 'Javascript' started by Wang, Jay, Jul 28, 2004.

  1. Wang, Jay

    Wang, Jay Guest

    I try to group several rows in a table into a div and show/hide them by
    click on a button somewhere with a javascript link. When clicked, the link
    will toggle the style of the div section's style between BLOCK and NONE.

    This technique works on normal text fine, but it doesn't work on part of the
    table, is there a solution that I can achieve the goal of turning on/off
    several rows all together? Thanks.
     
    Wang, Jay, Jul 28, 2004
    #1
    1. Advertisements

  2. Wang, Jay wrote:

    > I try to group several rows in a table into a div and show/hide them by
    > click on a button somewhere with a javascript link. When clicked, the link
    > will toggle the style of the div section's style between BLOCK and NONE.
    >
    > This technique works on normal text fine, but it doesn't work on part of the
    > table, is there a solution that I can achieve the goal of turning on/off
    > several rows all together? Thanks.


    With HTML 4 you can certainly put <tr> elements into a <tbody> element
    to group them and then hide the complete <tbody> element with script
    changing the CSS display property. A <div> element however is not meant
    to group <tr> elements.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jul 28, 2004
    #2
    1. Advertisements

  3. As Martin already pointed out, you can't just disrupt the structure of a
    TABLE (or TBODY) by throwing in a DIV. They're not meant to nest that way.

    What I think would be a neat workaround is to assign a common class to
    all the TRs you would like to be able to hide/unhide. Then you should be
    able to hide/unhide them as a group by manipulating the CSS stylesheet
    that defines the class.

    Unfortunately, I don't know how to do this - manipulate the stylesheet,
    that is :)

    Have fun!

    Wang, Jay wrote:
    > I try to group several rows in a table into a div and show/hide them by
    > click on a button somewhere with a javascript link. When clicked, the link
    > will toggle the style of the div section's style between BLOCK and NONE.
    >
    > This technique works on normal text fine, but it doesn't work on part of the
    > table, is there a solution that I can achieve the goal of turning on/off
    > several rows all together? Thanks.
    >
    >
    >
     
    Carl Smotricz, Jul 28, 2004
    #3
  4. Wang, Jay

    Grant Wagner Guest

    You don't have to manipulate the stylesheet. And given the differences across
    browsers attempting to do so, I strongly urge you to make use of "className"
    instead:

    <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>

    Note that there is no initial CSS class assigned to the tbody elements. As a
    result, my condition *must* be written testing className against the string "off".
    If the test were against "on", you'd miss the fact that the tbody elements are
    already "on", even though className is "".

    There are other ways of doing this, but they are mostly all variations on this
    basic theme.

    Carl Smotricz wrote:

    > Unfortunately, I don't know how to do this - manipulate the stylesheet,
    > that is :)
    >
    > Wang, Jay wrote:
    > > I try to group several rows in a table into a div and show/hide them by
    > > click on a button somewhere with a javascript link. When clicked, the link
    > > will toggle the style of the div section's style between BLOCK and NONE.
    > >
    > > This technique works on normal text fine, but it doesn't work on part of the
    > > table, is there a solution that I can achieve the goal of turning on/off
    > > several rows all together? Thanks.


    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Grant Wagner, Jul 28, 2004
    #4
  5. Wang, Jay

    martin Guest

    Wang, Jay wrote:
    > I try to group several rows in a table into a div and show/hide them by
    > click on a button somewhere with a javascript link. When clicked, the link
    > will toggle the style of the div section's style between BLOCK and NONE.
    >
    > This technique works on normal text fine, but it doesn't work on part of the
    > table, is there a solution that I can achieve the goal of turning on/off
    > several rows all together? Thanks.
    >
    >
    >


    drop the div , and set an id on each of the table's rows . you should be
    able to use the same technique on <tr> too .
     
    martin, Jul 29, 2004
    #5
  6. Wang, Jay

    Wang, Jay Guest

    Thanks, Martin, Carl and Grant.
    I probably should read those document in details before trying stunts. :)
    The problem lies in the table (someone else's work) I'm working on is that
    there is a long rowspan. By using TBODY, it will interrupt the display of
    the form.

    Carl's suggestion works well, I put the same style to the rows needed to be
    hidden and use javascript to toggle the stylesheet's rule.

    ________________________________________
    <HTML>
    <style type="text/css">
    <!--
    ..block {
    display: block;
    }
    -->
    </style>

    <script language="JavaScript">

    function toggle(){
    var theTable = (document.getElementById('myTABLE'));
    var theTB = theTable.tBodies.item(0);
    var theTR = document.styleSheets[0].rules[0];
    if ((theTR.style.display=="")||(theTR.style.display=="block"))
    theTR.style.display="none";
    else
    theTR.style.display="block";
    }
    </script>
    <BODY>

    <table id="myTABLE" border="1" width="100" align="center" cellpadding="0"
    cellspacing="0">



    <tr id="TR1" class="block1">
    <td width="50" id="TD11">1.1</td>
    <td width="50" id="TD12">1.2</td>
    </tr>
    <div id="text">
    <tr id="TR2" class="block">
    <td width="50" id="TD21">2.1</td>
    <td width="50" id="TD22">2.2</td>
    </tr>

    <tr id="TR3" class="block">
    <td width="50" id="TD31">3.1</td>
    <td width="50" id="TD32">3.2</td>
    </tr>
    </div>


    </table>
    <br><br>
    <center><a href="javascript:toggle();">show/hide</a></center>

    </BODY>
    </HTML>
    __________________________________________



    "Martin Honnen" <> wrote in message
    news:4107bd2b$...
    >
    >
    > Wang, Jay wrote:
    >
    > > I try to group several rows in a table into a div and show/hide them by
    > > click on a button somewhere with a javascript link. When clicked, the

    link
    > > will toggle the style of the div section's style between BLOCK and NONE.
    > >
    > > This technique works on normal text fine, but it doesn't work on part of

    the
    > > table, is there a solution that I can achieve the goal of turning on/off
    > > several rows all together? Thanks.

    >
    > With HTML 4 you can certainly put <tr> elements into a <tbody> element
    > to group them and then hide the complete <tbody> element with script
    > changing the CSS display property. A <div> element however is not meant
    > to group <tr> elements.
    >
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
    >
     
    Wang, Jay, Jul 29, 2004
    #6
  7. Wang, Jay

    bruce Guest

    "Wang, Jay" <> wrote in message news:<ce8ce5$kt1$>...
    > I try to group several rows in a table into a div and show/hide them by
    > click on a button somewhere with a javascript link. When clicked, the link
    > will toggle the style of the div section's style between BLOCK and NONE.
    >
    > This technique works on normal text fine, but it doesn't work on part of the
    > table, is there a solution that I can achieve the goal of turning on/off
    > several rows all together? Thanks.


    hey, try <SPAN> instead of <DIV>. I'm not saying it will work, but
    I've found some strange things work with one and not the other, and
    vice versa. Worth a simple try.
     
    bruce, Jul 29, 2004
    #7
  8. bruce wrote:
    > "Wang, Jay" <> wrote in message news:<ce8ce5$kt1$>...
    >> I try to group several rows in a table into a div and show/hide them by
    >> click on a button somewhere with a javascript link. When clicked, the link
    >> will toggle the style of the div section's style between BLOCK and NONE.
    >>
    >> This technique works on normal text fine, but it doesn't work on part of the
    >> table, is there a solution that I can achieve the goal of turning on/off
    >> several rows all together? Thanks.

    >
    > hey, try <SPAN> instead of <DIV>. [...]


    Nonsense.

    ,-[HTML 3.2]
    |
    | <!ELEMENT table - - (caption?, tr+)>

    ,-[HTML 4.01 Transitional/Strict]
    |
    | <!ELEMENT TABLE - -
    | (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

    ,-[XHTML 1.0 Transitional/Strict]
    |
    | <!ELEMENT table
    | (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

    ,-[XHTML 1.1 Basic Table Module]
    |
    | <!-- table: Table Element .............................. -->
    |
    | <!ENTITY % table.element "INCLUDE" >
    | <![%table.element;[
    | <!ENTITY % table.content
    | "( %caption.qname;?, %tr.qname;+ )"
    | >
    | <!ELEMENT %table.qname; %table.content; >
    | <!-- end of table.element -->]]>

    ,-[XHTML 1.1 Table Module]
    |
    | <!-- table: Table Element .............................. -->
    |
    | <!ENTITY % table.element "INCLUDE" >
    | <![%table.element;[
    | <!ENTITY % table.content
    | "( %caption.qname;?, ( %col.qname;* | %colgroup.qname;* ),
    | (( %thead.qname;?, %tfoot.qname;?, %tbody.qname;+ ) | ( %tr.qname;+
    | )))"
    | >
    | <!ELEMENT %table.qname; %table.content; >
    | <!-- end of table.element -->]]>


    PointedEars
     
    Thomas 'PointedEars' Lahn, Jul 29, 2004
    #8
  9. Wang, Jay

    Wang, Jay Guest

    Thanks, Martin, Carl and Grant.
    I probably should read those document in details before trying stunts. :)
    The problem lies in the table (someone else's work) I'm working on is that
    there is a long rowspan. By using TBODY, it will interrupt the display of
    the form.

    Carl's suggestion works well, I put the same style to the rows needed to be
    hidden and use javascript to toggle the stylesheet's rule.

    ________________________________________
    <HTML>
    <style type="text/css">
    <!--
    ..block {
    display: block;
    }
    -->
    </style>

    <script language="JavaScript">

    function toggle(){
    var theTable = (document.getElementById('myTABLE'));
    var theTB = theTable.tBodies.item(0);
    var theTR = document.styleSheets[0].rules[0];
    if ((theTR.style.display=="")||(theTR.style.display=="block"))
    theTR.style.display="none";
    else
    theTR.style.display="block";
    }
    </script>
    <BODY>

    <table id="myTABLE" border="1" width="100" align="center" cellpadding="0"
    cellspacing="0">



    <tr id="TR1" class="block1">
    <td width="50" id="TD11">1.1</td>
    <td width="50" id="TD12">1.2</td>
    </tr>
    <div id="text">
    <tr id="TR2" class="block">
    <td width="50" id="TD21">2.1</td>
    <td width="50" id="TD22">2.2</td>
    </tr>

    <tr id="TR3" class="block">
    <td width="50" id="TD31">3.1</td>
    <td width="50" id="TD32">3.2</td>
    </tr>
    </div>


    </table>
    <br><br>
    <center><a href="javascript:toggle();">show/hide</a></center>

    </BODY>
    </HTML>
    __________________________________________


    "Thomas 'PointedEars' Lahn" <> wrote in message
    news:...
    > bruce wrote:
    > > "Wang, Jay" <> wrote in message

    news:<ce8ce5$kt1$>...
    > >> I try to group several rows in a table into a div and show/hide them by
    > >> click on a button somewhere with a javascript link. When clicked, the

    link
    > >> will toggle the style of the div section's style between BLOCK and

    NONE.
    > >>
    > >> This technique works on normal text fine, but it doesn't work on part

    of the
    > >> table, is there a solution that I can achieve the goal of turning

    on/off
    > >> several rows all together? Thanks.

    > >
    > > hey, try <SPAN> instead of <DIV>. [...]

    >
    > Nonsense.
    >
    > ,-[HTML 3.2]
    > |
    > | <!ELEMENT table - - (caption?, tr+)>
    >
    > ,-[HTML 4.01 Transitional/Strict]
    > |
    > | <!ELEMENT TABLE - -
    > | (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
    >
    > ,-[XHTML 1.0 Transitional/Strict]
    > |
    > | <!ELEMENT table
    > | (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
    >
    > ,-[XHTML 1.1 Basic Table Module]
    > |
    > | <!-- table: Table Element .............................. -->
    > |
    > | <!ENTITY % table.element "INCLUDE" >
    > | <![%table.element;[
    > | <!ENTITY % table.content
    > | "( %caption.qname;?, %tr.qname;+ )"
    > | >
    > | <!ELEMENT %table.qname; %table.content; >
    > | <!-- end of table.element -->]]>
    >
    > ,-[XHTML 1.1 Table Module]
    > |
    > | <!-- table: Table Element .............................. -->
    > |
    > | <!ENTITY % table.element "INCLUDE" >
    > | <![%table.element;[
    > | <!ENTITY % table.content
    > | "( %caption.qname;?, ( %col.qname;* | %colgroup.qname;* ),
    > | (( %thead.qname;?, %tfoot.qname;?, %tbody.qname;+ ) | (

    %tr.qname;+
    > | )))"
    > | >
    > | <!ELEMENT %table.qname; %table.content; >
    > | <!-- end of table.element -->]]>
    >
    >
    > PointedEars
     
    Wang, Jay, Jul 29, 2004
    #9
  10. Wang, Jay

    DU Guest

    Wang, Jay wrote:
    > I try to group several rows in a table into a div and show/hide them by
    > click on a button somewhere with a javascript link. When clicked, the link
    > will toggle the style of the div section's style between BLOCK and NONE.
    >
    > This technique works on normal text fine, but it doesn't work on part of the
    > table, is there a solution that I can achieve the goal of turning on/off
    > several rows all together? Thanks.
    >
    >
    >


    I have an entirely working cross-browser code for rows and rowgroups
    collapsing at this url:

    Dynamic table formatting for DOM 1 browsers
    http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DynamicTableFormatting.html

    Except for a particular bug in Opera 7.x regarding sequential order of
    rows according to display logical order and not document order, the
    script functions work very well in MSIE 6, NS 7.x, M-meleon 0.8.2,
    Mozilla 1.4+, Opera 7.x.

    DU
     
    DU, Aug 2, 2004
    #10
    1. Advertisements

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:
    4,088
  2. David
    Replies:
    4
    Views:
    6,023
    Vidar Petursson
    May 21, 2004
  3. Rio
    Replies:
    4
    Views:
    1,282
  4. J
    Replies:
    4
    Views:
    339
    Neil Cerutti
    Jan 12, 2007
  5. VijayRama
    Replies:
    2
    Views:
    2,444
    Gregory A. Beamer
    Oct 12, 2009
Loading...

Share This Page