table row grouping

[TrinkDawg]

I have a question about tables that is driving me crazy, and I wanted to see if anyone here knew of a solution that I am missing. My situation is this:

I have a need to show tabular data where one particular column of data (say column a) will have one of a few possible values (say x, y, z). If 30 rows of data had the value of x in column a, then I would like to have an "expander row" which would have a +/- or whatever that the user could click on that would show or hide all the rows in the table that had the value of x in column a.

The problem is that it becoms slow to iterate through the rows of the table looking for the right rows to show or hide. The optimal solution would be to have some sort of container that the rows belonged to that I could show or hide as appropriate. My example above says 30 rows, but the real data will more likely be on the scale of 1000 rows.

I have tried using nested <tbody> tags, and using <div> and <span> tags in the table. The problem is that a browser uses a table object to render the table, so divs and spans in the table do not affect the rendering of the table, and <tbody> elements are only allowed to contain <tr> elements, not other <tbody> elements, which blocks my nesting idea. I have also tried nesting tables within tables, but the borders get all wierd.

This problem is compounded when more than one column has grouping capability, so that the rows that are being hidden or shown using the data in column a could have subsets of rows that could also be hidden or shown based on the data in column b.

Any help or points in the right direction would be great. Thanks.

-Mike

 

[ChrisHunt]

Could you do it by allocating a class to the <tr> that depends on the value of column A like this:
[tt]
<tr class=&quot;x&quot;><td>x</td><td>...</td></tr>
<tr class=&quot;y&quot;><td>y</td><td>...</td></tr>
<tr class=&quot;x&quot;><td>x</td><td>...</td></tr>
[/tt]
Then you could just manipulate the CSS properties of that class to make it invisible.

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[TrinkDawg]

This is an excellent idea. I read that the popular browsers now even support multiple classes, so this would work for the heirarchical data as well. IE seems to be working fine, but Netscape 6 is beating me down at the moment. It seems that perhaps changing a style rule in NN6 does not change the way things on the page are rendered or something of that sort.

Basically, I'm getting hold of the appropriate style rule using selectorText, and changing the display attribute to be either '' or none, depending on whether I want to show or hide the rows. I can see (through alerts) that the attribute is changing, but nothing ever disappears from the screen. Ah, the joys of cross browser javascript. If anyone has ever had this or a similar problem please chime in. Thanks Chris for this great lead.

-Mike

 

[MrBelfry]

try using getelementbyid

MrBelfry