[thelist] Wrapping <tr> groups
Ken Snyder
kendsnyder at gmail.com
Mon Jul 16 22:24:16 CDT 2007
Bill Moseley wrote:
> ...
> Oh, I thought I tried that and it failed validation. Oh, maybe I
> tried to nest the <tbody> sections and that fails validation.
>
Right, <tbody> sections cannot nest. It would be helpful if browsers
had such capabilities but no.
> ...
> Just to to add structure - I have a group of things (which happen to
> be <tr> rows) so it makes sense to wrap them in an element. <tbody>
> works for that. In my case I want to then, within that group, contain
> sub-groups.
>
> <tr>'s don't really logically nest, so I can see why this won't work.
> the <tbody> will be helpful
Yes. But any nesting schemes will probably not benefit from <tbody>.
You could do a very simple convention that would allow you to manipulate
the table in JavaScript without knowing its structure. Consider this
format:
<tr id="parent-1">
<td><span onclick="toggle(1)">+</span> Accounting</td><td>...</td>
</tr>
<tr class="group-1" style="display: none">
<td>Fred</td><td>...</td>
</tr>
<tr id="parent-2" class="group-1" style="display: none">
<td><span onclick="toggle(2)">+</span> Joe</td><td>...</td>
</tr>
<tr class="group-2" style="display: none">
<td>Joe's first subordinate</td><td>...</td>
</tr>
<tr class="group-2" style="display: none">
<td>Joe's second subordinate</td><td>...</td>
</tr>
<tr id="parent-3" class="group-2" style="display: none">
<td><span onclick="toggle(3)">+</span> Joe's third
subordinate</td><td>...</td>
</tr>
<tr class="group-3" style="display: none">
<td>Joe's third subordinate's employee</td><td>...</td>
</tr>
...
<script>
// When Accounting is clicked, show/hide Fred and Joe (class=group-1)
// When Joe is clicked, show/hide his subordinates, etc. (class=group-2)
function toggle(groupNo) {
// for implementing getChildTrsWithClass see GoogleU
// http://www.google.com/search?q=document.getElementsByClassName
var trs = getChildTrsWithClass('group-'+groupNo, 'parent-'+groupNo);
for (var i=0, len<trs.length; i<len; i++) {
trs[i].style.display = (trs[i].style.display=='none' ? '' : 'none');
}
}
</script>
So then the hard part is just getting your server-side script to compute
the id and class names. Have fun. And show us the final product if you
can. This looks like a neat idea. I've seen many a spreadsheet that
required endless scrolling because collapsing was not easy to do. :)
- Ken Snyder
More information about the thelist
mailing list