Nested TBODYs

The quick answer is, this is not possible. But continue to read on a possible workaround.

As per the HTML 4.01 tables specification, a tbody consists of only TRs. So, that essentially means, it’s not possible to have nested TBODYs. Ofcourse, a cell in a row can contain a table that can contain a TBODY, but we are not talking about that type of nesting, are we?

Taking a step back, what’s the need for nested TBODYs? I have a hierarchical data that is displayed as a table and to provide the ability to expand and collapse, a quick temptation is to make the child nodes of each parent node to be put into a tbody and just hide/show that tbody element alone. Now, due to the hierarchical nature, a child node itself will need to be created as a tbody to capture it’s own children. So, this is where the need for a nested tbody arises.

So, after checking the above mentioned specification that it’s not possible to nest tbodys, I achieved the above required expand/collapse functionality using TRs itself. The trick here is to make use of the ID attribute and specify a unique ID for each TR such that the TR elements of the child nodes contain the IDs which contain the ID of the parent element in them as a prefix. For example, if the parent has an id of ‘0’, then the child 1 can contain ‘0/0’, child 2 can contain ‘0/1’ and child of child 1 can contain ‘0/0/0’ and so on. With this approach, when the user is trying to expand/collapse a node, I can loop through all the TRs of the table and identify those that have a prefix same as the id of the node being expanded/collapsed and then hide/show those rows accordingly. I tried this idea and it worked without any problems.


Filed under DHTML, javascript

6 responses to “Nested TBODYs

  1. Pingback: Firefox 3 « poeticcode

  2. Pingback: JavaScript Performance - Incremental Asynchronous Processing « poeticcode

  3. Scott

    Can you share the code for this?

    I’m pretty good in PHP but my javascript skills are lacking. When I pull my data I’m never sure how many items I will have so I need a dynamic approach to defining the grouping. I believe your approach will work

    An example of the structure of the hierartical data:

    + SUB TOTAL 1
    ITEM C1
    ITEM C2
    ITEM C3
    – SUB TOTAL 2

    Thanks, BTW I have spent the whole day reseraching this topic on google

  4. Nice explanation, shame there isn’t any code though. Still helpful 🙂

  5. Hello,

    with jquery there is a possibility to use the .nextUntil() method. So, when you give all your items from the same level the same classname, you can get all the items between this and the next item with this method. and then close them.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s