How to nest rows in a table?

[Tim Streater]

Not sure is this is quite the right NG, but anyway:

I have rows in a table which I want to have represent nested data, which
I want to show and hide. I can hide a row easily enough by doing:

object.style.display = 'none'; and
object.style.display = '';

but for nested data it gets a lot more complex (imagine how with
Explorer you click on the little plus and minus to expose or hide nested
sections). I did look at using <tbody> but you can't nest these - every
new <tbody> closes the previous one, even if you leave off the </tbody>.

I will be generating the rows from a database with PHP, so I 'know' the
nesting as I generate the table, and I could generate custom objects to
model it, but an HTML construct with the right characteristics would be
preferable. Am I missing anything obvious?

Comments welcome.

Thanks,

-- tim

 

[Martin Honnen]

I will be generating the rows from a database with PHP, so I 'know' the
nesting as I generate the table, and I could generate custom objects to
model it, but an HTML construct with the right characteristics would be
preferable. Am I missing anything obvious?

HTML tables can be nested meaning you can put an inner table in a cell
(td, th) of an outer table.

 

[Tim Streater]

HTML tables can be nested meaning you can put an inner table in a cell
(td, th) of an outer table.

Well, I know that, but then the columns won't line up any more. Is there
a way to get inner nested tables' columns to align with outer ones?

-- tim

 

[Matt Kruse]

I have rows in a table which I want to have represent nested data,
which I want to show and hide.

There is no way in html that currently works in browsers to logically group
rows together (like colspan tags).

What I do is give each tr a class, such as:

<tr class="level1">...</tr>
<tr class="level2">...</tr>
<tr class="level3">...</tr>
<tr class="level2">...</tr>
<tr class="level1">...</tr>
<tr class="level1">...</tr>

Then in your code, when you click on the 'expand' icon or link, you check
the tr's class. Start from that tr and look at each one after it, comparing
the number ofter the "level" prefix and seeing if it is exactly 1 greater
than the current row's index. If it is, show it. Once you hit a row that is
equal or less than your current row, you can stop.

It can be a bit slow on big tables, but it can easily be made reusable and
used on many table structures.

 

[Tim Streater]

There is no way in html that currently works in browsers to logically group
rows together (like colspan tags).

What I do is give each tr a class, such as:

<tr class="level1">...</tr>
<tr class="level2">...</tr>
<tr class="level3">...</tr>
<tr class="level2">...</tr>
<tr class="level1">...</tr>
<tr class="level1">...</tr>

Then in your code, when you click on the 'expand' icon or link, you check
the tr's class. Start from that tr and look at each one after it, comparing
the number ofter the "level" prefix and seeing if it is exactly 1 greater
than the current row's index. If it is, show it. Once you hit a row that is
equal or less than your current row, you can stop.

It can be a bit slow on big tables, but it can easily be made reusable and
used on many table structures.

Yes, I guess I could do this to have pseudo-nested behaviour. In the
ideal world, if I have some of the inner nested rows displayed, and I
then hid and redisplayed the outer part of the nest, it would be nice to
redisplay things just as they were before hiding them (or have the
option to do that, at any rate). That's why it would have been ideal if
I could just have nested the <tbody>. The inner <tbody> would have its
display state, which would not be affected by setting that of the outer
<tbody> to 'none'.

-- tim