[thelist] Wrapping <tr> groups

[Ken Snyder]

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