show/hide <tr> with click

[Martin Nadoll]

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

 

[J.O. Aho]

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

 

[Jukka K. Korpela]

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.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

J.O. Aho a écrit :

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

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

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