Showing/Hiding <tr> s

Discussion in 'Javascript' started by c.anandkumar@gmail.com, Aug 23, 2005.

  1. Guest

    Hi All -

    I have some problems getting a small piece of javascript working
    correctly for Firefox. Here is what I am trying to do -

    1. I have a form (like a search form)
    2. I have many groups of searchable fields in the fields
    3. Each group can be expanded/collapsed by clicking on a link
    "(Fewer|More) Options" which sits right next to the group title.

    For eg. -
    I can search a person on "Name" - this group, "Name" has one field,
    "First Name" in the collapsed state and more searchable fields ("Last
    Name", "Middle Name") in the expanded state.

    To achieve this, what I did was -

    1. All the fields in one table
    2. One row for each Label/Text-Box pair
    3. Two columns on each row, the left one for Label and the right one
    for Text-Box

    For collapsing/expanding purposes, I had assigned an ID to each <tr>
    that can be hidden/shown. And I had used the following js functions for
    doing the same -

    function toggleFields() {
    var i = 0;
    var src = document.getElementById(arguments[0]);
    if (src.state == null || src.state == 'more') {
    src.state = 'few';
    src.innerHTML = 'Fewer Options';
    }
    else {
    src.state = 'more';
    src.innerHTML = 'More Options';
    }
    for (i = 1; i < arguments.length; i++) {
    var obj = document.getElementById(arguments);
    if (obj.showing == null || obj.showing == 1) {
    obj.showing = 0;
    }
    else {
    obj.showing = 1;
    }
    displayObject(arguments, obj.showing);
    }
    }
    function displayObject(id, show) {
    var obj = document.getElementById(id);
    if (obj==null) return;
    obj.style.display = show ? 'block' : 'none';
    obj.style.visibility = show ? 'visible' : 'hidden';
    }


    The HTML is something like this -
    <table>
    <tr id="fname"> <td> ... </td> <td> ... </td> </tr>
    <tr id="lname"> <td> ... </td> <td> ... </td> </tr>
    <tr id="mname"> <td> ... </td> <td> ... </td> </tr>
    </table>

    And the link to expand/collapse this group is like this -
    <a id="nameToggle" href="toggleFields('nameToggle', 'lname', 'mname')">
    Fewer Options </a>

    The problem that I am facing -
    1. It works well in IE-6.0
    2. Goofs up the UI in Firefox-1.0.4 -
    Works well the first time, (i.e., hiding lname and mname), but when
    trying
    to expand the group again, the arrangement of rows/columns goes
    amiss.

    Is there something that I am doing wrong?

    Thanks
    - Anand
     
    , Aug 23, 2005
    #1
    1. Advertising

  2. wrote:

    > obj.style.display = show ? 'block' : 'none';


    > 2. Goofs up the UI in Firefox-1.0.4 -


    In CSS 2 browsers, <tr> elements have a default display of table-row, not
    block. Toggle between "none" and "" instead.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Aug 23, 2005
    #2
    1. Advertising

  3. Guest

    David Dorward wrote:
    >
    > In CSS 2 browsers, <tr> elements have a default display of table-row, not
    > block. Toggle between "none" and "" instead.


    Great! It works well now.
    Thanks for your help
    - Anand
     
    , Aug 23, 2005
    #3
    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. John Kraft
    Replies:
    1
    Views:
    405
    S. Justin Gengo
    Aug 15, 2003
  2. Amber
    Replies:
    1
    Views:
    630
    Alvin Bruney
    Oct 11, 2003
  3. beccak
    Replies:
    4
    Views:
    4,969
    beccak
    Jun 9, 2004
  4. John
    Replies:
    0
    Views:
    302
  5. Ste
    Replies:
    41
    Views:
    812
    Thomas 'PointedEars' Lahn
    Aug 1, 2007
Loading...

Share This Page