hide tables rows

Discussion in 'Javascript' started by Dautkhanov@gmail.com, Jan 23, 2007.

  1. Guest

    Hello all !

    I have my own library for web-design building - active forms, lists. I
    am going
    to build tabbing component. The complexity in this process
    is that all web forms uniformed and are built as TABLEs, where
    each field is TR. Tabs have to show/hide some of table rows.

    I don't know how TR's properties must be changed in order to hide them
    all.
    I tried make HTML code like
    <TR>...</TR>
    ....
    <DIV id=tab1>
    <TR>...</TR>
    ....
    </DIV>
    <TR>...</TR>
    ....

    And tried to change visibility of a DIV, but this doesn't work.
    How can I change visibility of set of TRs?

    Thanks
    , Jan 23, 2007
    #1
    1. Advertising

  2. Cylix Guest

    If you are working for tabs, table formatting is not a common(good)
    pratice.
    You may find some example on using unorder list / div / span.
    Cylix, Jan 23, 2007
    #2
    1. Advertising

  3. marss Guest

    wrote:

    > And tried to change visibility of a DIV, but this doesn't work.
    > How can I change visibility of set of TRs?


    Hi,
    It is simple if you know which rows you want to hide/show.
    Here is the example:

    <html>
    <head>
    <script>
    function changeVisibility(show)
    {
    var rows = document.getElementById("tbl").rows;
    for(var i=0;i<rows.length;i++)
    if (i==1 || i==2 || i==3)
    rows.style.display = show ? "" : "none";
    }
    </script>
    </head>
    <body>
    <table id="tbl">
    <tr><td>0</td></tr>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    </table>
    <input type="button" onclick="changeVisibility(true)" value="Show
    Rows">
    <input type="button" onclick="changeVisibility(false)" value="Hide
    Rows">
    </body>
    </html>
    marss, Jan 23, 2007
    #3
  4. Guest

    > function changeVisibility(show)
    > {
    > var rows = document.getElementById("tbl").rows;
    > for(var i=0;i<rows.length;i++)
    > if (i==1 || i==2 || i==3)
    > rows.style.display = show ? "" : "none";}

    Thanks. That will be very helpful.
    , Jan 24, 2007
    #4
  5. RobG Guest

    On Jan 23, 6:55 pm, "marss" <> wrote:
    > wrote:
    > > And tried to change visibility of a DIV, but this doesn't work.
    > > How can I change visibility of set of TRs?Hi,

    > It is simple if you know which rows you want to hide/show.
    > Here is the example:
    >
    > <html>
    > <head>
    > <script>
    > function changeVisibility(show)
    > {
    > var rows = document.getElementById("tbl").rows;
    > for(var i=0;i<rows.length;i++)
    > if (i==1 || i==2 || i==3)
    > rows.style.display = show ? "" : "none";}</script>


    Consider the simplicity of a toggle:

    function toggleDisplay(el) {
    if (typeof el == 'string') el = document.getElementById(el);
    el.style.display = ('none' == el.style.display)? '' : 'none';
    }


    > </head>
    > <body>
    > <table id="tbl">
    > <tr><td>0</td></tr>
    > <tr><td>1</td></tr>
    > <tr><td>2</td></tr>
    > <tr><td>3</td></tr>
    > <tr><td>4</td></tr>
    > </table>
    > <input type="button" onclick="changeVisibility(true)" value="Show
    > Rows">
    > <input type="button" onclick="changeVisibility(false)" value="Hide
    > Rows">


    That would be much simpler if the rows to hide/show were enclosed in
    their own tbody element:

    <table id="tbl">
    <tr><th>0
    <tbody id="tb01">
    <tr><td>1<tr><td>2<tr><td>3<tr><td>4
    </tbody>
    </table>

    <input type="button" onclick="toggleDisplay('tb01');"
    value="Hide/show rows">

    To prevent the "yo-yo" effect it may be better to toggle the visibility
    instead.


    --
    Rob
    RobG, Jan 24, 2007
    #5
  6. Guest

    On 24 ñÎ×., 14:10, "RobG" <> wrote:
    > Consider the simplicity of a toggle:
    >
    > function toggleDisplay(el) {
    > if (typeof el == 'string') el = document.getElementById(el);
    > el.style.display = ('none' == el.style.display)? '' : 'none';
    > }

    Wow! That will be great simplicity in this task.


    > That would be much simpler if the rows to hide/show were enclosed in
    > their own tbody element:
    >
    > <table id="tbl">
    > <tr><th>0
    > <tbody id="tb01">
    > <tr><td>1<tr><td>2<tr><td>3<tr><td>4
    > </tbody>
    > </table>
    > To prevent the "yo-yo" effect it may be better to toggle the visibility
    > instead.


    Rob, what do you mean by "yo-yo" effect?

    Anyway, thanks
    , Jan 25, 2007
    #6
    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,970
  2. David
    Replies:
    4
    Views:
    5,960
    Vidar Petursson
    May 21, 2004
  3. =?Utf-8?B?QmlsbCBCb3Jn?=

    RE: DataGrid Hide Rows

    =?Utf-8?B?QmlsbCBCb3Jn?=, Apr 27, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    6,307
    Chris
    Apr 27, 2005
  4. VijayRama
    Replies:
    2
    Views:
    2,313
    Gregory A. Beamer
    Oct 12, 2009
  5. Marek Mänd
    Replies:
    5
    Views:
    201
    Thomas 'PointedEars' Lahn
    Jun 27, 2004
Loading...

Share This Page