PDA

View Full Version : Hierarchical Table with HTML and Jquery



krs
02-22-2014, 04:53 PM
I am trying to create Hierarchical Table with HTML and Jquery. In my attachment if I click
check box I want to see maingroup1 and main group2.when I click maingroup1 I want to display
subgroups toggle.can somebody help with the design and script. i have it in fiddle also.Main group 1 and main group 2
should be in the same level.

Maingroup1 has subgroup1 and subgroup2.subgroup2 has aubgroup3.when i click the parent group
child group should toggle.Can some body help with some generic code.I am creating this as template
finally I want to create like this with real data in server side(HTML structure) and manipulate with jquery.
http://jsfiddle.net/qyp42/.IF the html structure has to be changed also its ok.
I am targetting IE 8.0

Thanks.

Deadweight
02-23-2014, 06:57 AM
So are you trying to make each subgroup toggle?

krs
02-23-2014, 01:33 PM
Yes.Also when I click MainGroup1 all the subgroups should be toggled showing only maingroup1 and maingroup2.maingroup2 also will have subgroups.so when i clcik maingroup1 or maingroup2 i think
we should pass param to toggle specific group.

Deadweight
02-23-2014, 11:39 PM
One more thing, if you hit maingroup1 do you want the first subgroup to show or do you always want the subgroup headers to show?

krs
02-24-2014, 01:52 PM
let the subgroup headers show when you click subgroup headers let the details show.I think we should have some common function passing id or class or any identifier of maingroup or subgroup for toggle.so that when we have subgroups in maingroup2 we can
use the same function.

Deadweight
02-26-2014, 12:13 AM
Alright im almost finished. I'll post the test page to you as an inbox.

krs
02-26-2014, 01:20 AM
ok.if you want you can put in jsfiddle also.

Deadweight
02-26-2014, 12:50 PM
FYI I'm finished:
http://jsfiddle.net/qyp42/2/

I think that is what you are wanting.

FYI you can set up the tables any way you would like I just wanted to show an example with two different tables.

The way i did it way labeling the first TR as '.drop_row' then the functions do the rest. Also, i think with my way you could actually place a table inside a table (in a row under it) and actually hide the whole table. If you want an example of that let me know. Also, i am sending you a PM.

OH and yes this does work in IE8 also.

krs
02-27-2014, 01:26 AM
HI,
Thx Can you check the http://jsfiddle.net/qyp42/4/ I updated little bit.
if you see when i click expand/collapse I am showing only the main tables (Info1,info2,info3)also In my updated design
I have a table with class sub_table1 actually I want that to be the child of previous info table.it's like info2 has one info sublevel and that is having another sublevel.
And also when i click info1,info2,info3(main tables) I like to show all subtables below it.right now it's not showing.If you think making a table inside a table will
give a better look like hierarchy then that also fine.

http://jsfiddle.net/qyp42/4/

Deadweight
02-27-2014, 03:23 AM
I'll fix it for you.
All your tables that you want to expand on click add the class 'drop_row' to the first '<tr>'.

If you want to change the layout of any of the other tables eg. 'sub_table' just add it to the '<table>' also you don't have to use my colors or anything.
All you have to do to allow the click is add 'drop_row' to the first '<tr>' in the '<table>' you would like to use.

http://jsfiddle.net/qyp42/6/

Also, you couldn't see the other table because of your 'margin-right:400px' so i removed it and deleted the thing you added to the code. Ill throw in a table in a table to show that this still works.

fsession16
03-18-2014, 01:11 AM
Oh for sure. I have required components in Fsession and therefore i was actually thrilled. Before, I had ordered other shop but no shop made me felt satisfied. Then my small amount of friends explained have a shot at with www.fsession.com And That I literally thrilled. Low-budget asking price, the quality is superb. Perspective solutions of Fsession is really truly good. And beneficial: The trends at Fsession are really fabulous with awesome look. I get products on time or sooner than sufficient time I requested.

I wish until I recognized Fsession sooner to suffered from good option for my situation.

Plus you, I do think you also need with Fsession much like me.

___________________________________________

black bootcut jeans for women (http://www.fsession.com/clothing/denim/bootcutjeans.html)

Deadweight
08-20-2014, 09:32 PM
No reply or anything from him. Close this please?