show/hide <tr> with click

Discussion in 'HTML' started by Martin Nadoll, Apr 7, 2007.

  1. hello,

    i have a table with about 20 rows coming from a mysql database.
    in the database i have text with details for every row.
    i dont want to show all these details, only my other information.

    so, what i want to do is to make a textlink into every row "show details".
    this details should appear in the next <tr> after the row i cklicked and all
    following information should go down.
    in the details-row i want to have a textlink "hide details" so that
    everything looks like before.

    i dont want to have server contact after "show details". the information
    should be already there in hidden rows.
    I think it should only be something like show/hide <tr>.

    But i dont know, how to do that.

    Thanks for any help on that,
    Martin Nadoll
     
    Martin Nadoll, Apr 7, 2007
    #1
    1. Advertising

  2. Martin Nadoll

    J.O. Aho Guest

    Martin Nadoll wrote:
    > hello,
    >
    > i have a table with about 20 rows coming from a mysql database.
    > in the database i have text with details for every row.
    > i dont want to show all these details, only my other information.
    >
    > so, what i want to do is to make a textlink into every row "show details".
    > this details should appear in the next <tr> after the row i cklicked and all
    > following information should go down.
    > in the details-row i want to have a textlink "hide details" so that
    > everything looks like before.


    You may use a hidden div that you turn to a visible with a link, here is an
    example that uses form buttons to show/hide, but you can use onClick on a
    anchor instead.

    http://www.rgagnon.com/jsdetails/js-0086.html


    --

    //Aho
     
    J.O. Aho, Apr 7, 2007
    #2
    1. Advertising

  3. Scripsit Martin Nadoll:

    > i have a table with about 20 rows coming from a mysql database.
    > in the database i have text with details for every row.
    > i dont want to show all these details, only my other information.


    So remove the details when generating an HTML document. It would be
    pointlessly risky to make the functionality depend on _both_ CSS _and_
    JavaScript being enabled and supported the way you expect.

    > so, what i want to do is to make a textlink into every row "show
    > details".


    That's OK, except that the link texts should be different, so that different
    links would have different links, e.g. "Sales Feb 2006". Naturally, they
    should be real links, pointing to versions of the page to be generated
    server-side as requested.

    > i dont want to have server contact after "show details".


    So you don't want a robust solution?

    > I think it should only be something like show/hide <tr>.


    If you wish to continue trying to implement a non-robust approach, you need
    to note that CSS properties for manipulating table rows in a collapsing and
    expanding manner are poorly supported on major browsers. Odd as it might
    sound, the best option is probably to manipulate the DOM (Document Object
    Model) tree in JavaScript, adding or removing rows as elements, instead of
    just switching visibility.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Apr 7, 2007
    #3
  4. J.O. Aho a écrit :
    > Martin Nadoll wrote:
    >> hello,
    >>
    >> i have a table with about 20 rows coming from a mysql database.
    >> in the database i have text with details for every row.
    >> i dont want to show all these details, only my other information.
    >>
    >> so, what i want to do is to make a textlink into every row "show details".
    >> this details should appear in the next <tr> after the row i cklicked and all
    >> following information should go down.
    >> in the details-row i want to have a textlink "hide details" so that
    >> everything looks like before.

    >
    > You may use a hidden div


    A hidden div within a table imply invalid markup code.

    > that you turn to a visible with a link, here is an
    > example that uses form buttons to show/hide, but you can use onClick on a
    > anchor instead.
    >
    > http://www.rgagnon.com/jsdetails/js-0086.html


    The example is pretty old, not adjusted to the OP description.

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
     
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Apr 8, 2007
    #4
  5. Martin Nadoll wrote :
    > hello,
    >
    > i have a table with about 20 rows coming from a mysql database.
    > in the database i have text with details for every row.
    > i dont want to show all these details, only my other information.
    >
    > so, what i want to do is to make a textlink into every row "show details".


    I would recommend a button, and not a text link for 3 reasons:
    1- you are modifying the display of the current page
    2- the default and normal action of a link is to load a new page, a new
    resource into the current window. So, if javascript support is disabled,
    then such default, normal and basic purpose/functionality of a link
    should be preserved.
    3- semantically speaking, your page requirements point to a command
    button, not a text link.

    > this details should appear in the next <tr> after the row i cklicked and all
    > following information should go down.
    > in the details-row i want to have a textlink "hide details" so that
    > everything looks like before.
    >
    > i dont want to have server contact after "show details". the information
    > should be already there in hidden rows.
    > I think it should only be something like show/hide <tr>.
    >
    > But i dont know, how to do that.
    >
    > Thanks for any help on that,
    > Martin Nadoll


    Martin, that's easy to do. I'll ask you to include a credits note for my
    contribution in the webpage and in the source code. Is that fair enough?
    Do you agree?

    Gérard
    --
    Using Web Standards in your Web Pages (Updated Dec. 2006)
    http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
     
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Apr 8, 2007
    #5
    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:
    4,050
  2. Mike P

    show/hide divs on checkbox click

    Mike P, Nov 14, 2007, in forum: ASP General
    Replies:
    1
    Views:
    254
    Dooza
    Nov 14, 2007
  3. Eero Tuomenoksa

    Show & hide multiple div tags with one click

    Eero Tuomenoksa, May 28, 2006, in forum: Javascript
    Replies:
    2
    Views:
    368
    TheBagbournes
    May 28, 2006
  4. Replies:
    2
    Views:
    445
  5. ll
    Replies:
    2
    Views:
    683
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page