Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Hierarchical Table with HTML and Jquery

  1. #1
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Hierarchical Table with HTML and Jquery

    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.
    Attached Files Attached Files

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    So are you trying to make each subgroup toggle?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #5
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Alright im almost finished. I'll post the test page to you as an inbox.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  7. #7
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ok.if you want you can put in jsfiddle also.

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  9. #9
    Join Date
    Apr 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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/

  10. #10
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    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.
    Last edited by Deadweight; 02-27-2014 at 02:34 AM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Hierarchical Table with HTML and JS
    By krs in forum JavaScript
    Replies: 0
    Last Post: 02-15-2014, 12:22 PM
  2. Hierarchical Table with HTML and JS
    By krs in forum JavaScript
    Replies: 0
    Last Post: 02-15-2014, 01:12 AM
  3. Cannot get jQuery Resizable API to work on html table
    By jason_kelly in forum JavaScript
    Replies: 3
    Last Post: 07-24-2013, 04:44 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •