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
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