Win a copy of Practical SVG this week in the HTML/CSS/JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Displaying Table in Expanded and Collapsed manner

 
Mike Jeya
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi all,

here I am explaining abt my requirement.

Initially...My table looks like this..Fields are retreived from either database or xml

-------------------------------------
Heading1 Heading2 Heading3
-------------------------------------
[+] field1 field12 filed13
[+] field2 field22 filed23


if I expand field1, if it has subelement it should be expanded as


-------------------------------------
Heading1 Heading2 Heading3
-------------------------------------
[-] field1 field12 filed13
[+] field11 field112 filed113
[+] field2 field22 filed23

Can anyone help me out this??

Thanks in Advance.
 
Julian Kennedy
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you want is called a tree or tree view, like Windows Explorer. There are two basic options for achieving this: JavaScript or server-side code (JSP/Servlet). With JavaScript you have to serve all the data in one go. Whether this is practical depends on how much data you have. When the user clicks on a plus or minus icon your code can hide or show the sub-tree by changing the CSS "display" property. I Googled for "tree javascript", which came up with a few free options that may be of interest to you. The second option requires you to submit to the server each time an icon button is clicked. This is obviously going to be less responsive but may be more practical if large volumes of data are involved.

Also bear in mind that using JavaScript restricts your audience somewhat, i.e. it typically makes your site less accessible.

Hope that helps.

Jules
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!