What would be the best way of grouping table rows in an HTML table? Some of the groupings are supposed to be nested, so using <tbody> is not an ideal solution (they are not supposed to be nested). My data has the following format: Level 1 Level 1 Level 2 Level 2 Level 3 Level 4 Level 3 Level 3 Level 2 Level 1 Level 2 Level 3 Level 4 Level 4 Level 3 Level 2 Level 3 What I am trying to achieve: sensible document structure that's easy to read so far I achieved the 'easy to read' part with css for different levels some of the nested levels may be required to be collapsible, so a grouping would (?) make things easier. It would have to work such that nested level immediately following any particular higher level would collapse via some mechanism (clicking, most likely). Not sure how much sense this collapsing makes but it may be one of the requirements. The table is generated in JavaScript (from a JSON object that has a nested structure), so I can do all sorts of magic to it. The data represents a financial balance sheets, and sometimes you may want do display/hide more detailed information on any particular data row, hence the nesting.

Reputation: 455

Grouping nested table rows

What would be the best way of grouping table rows in an HTML table? Some of the groupings are supposed to be nested, so using <tbody> is not an ideal solution (they are not supposed to be nested).

My data has the following format:

Level 1
Level 1
    Level 2
    Level 2
        Level 3
            Level 4
        Level 3
        Level 3
    Level 2
Level 1
    Level 2
        Level 3
            Level 4
            Level 4
        Level 3
    Level 2
        Level 3

What I am trying to achieve:

sensible document structure that's easy to read
so far I achieved the 'easy to read' part with css for different levels
some of the nested levels may be required to be collapsible, so a grouping would (?) make things easier. It would have to work such that nested level immediately following any particular higher level would collapse via some mechanism (clicking, most likely). Not sure how much sense this collapsing makes but it may be one of the requirements.

The table is generated in JavaScript (from a JSON object that has a nested structure), so I can do all sorts of magic to it. The data represents a financial balance sheets, and sometimes you may want do display/hide more detailed information on any particular data row, hence the nesting.

Upvotes: 0

Answers (3)

krpec

Reputation: 66

I came to the same problem to solve, here's my solution, I hope it'll help..

The thing for me was to add a few attributes (rowname, parent, state) to each row of the table. State attribute can be either "opened", "collapsed" or "leaf". Then two javascript functions will do the magic, see the working fiddle.

Upvotes: 1