Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > show/hide <tr> with click

Reply
Thread Tools

show/hide <tr> with click

 
 
Martin Nadoll
Guest
Posts: n/a
 
      04-07-2007
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


 
Reply With Quote
 
 
 
 
J.O. Aho
Guest
Posts: n/a
 
      04-07-2007
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
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      04-07-2007
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/

 
Reply With Quote
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      04-08-2007
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...your_Web_Pages
 
Reply With Quote
 
=?ISO-8859-1?Q?G=E9rard_Talbot?=
Guest
Posts: n/a
 
      04-08-2007
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...your_Web_Pages
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
click click click Andy Morrison Computer Support 7 12-20-2007 06:50 AM
image button click event fires before click event of button Purvi T ASP .Net 0 10-19-2004 06:19 AM
Button.Init? how Do I know if click event has been fired? TextBox.TextChanged event before Button.Click in a CompositeCustomControl. jorge ASP .Net 2 05-25-2004 11:45 PM
button click event being called twice on click mike parr ASP .Net 1 05-20-2004 04:02 PM
Datalist selects Item after first click, but does apply the SelectedItemTemplate after the second click only Dirk Meusel ASP .Net 1 08-19-2003 09:56 AM



Advertisments