Table Columns Show/hide Switch
I have a web page with a table generated from a database consisting of 6 columns, all holding values from a given recordset.
One of the columns should, however, be structured as a “multi-column”, being able to hold 9 different values, but only one of these should be visible at a time.(The values are different statistics applying to each recordset: today, yesterday, this week, last week, this month, last month, this year, last year, overall)
The content of this “multi-column” is controlled by the user, who will be able to toggle between these 9 sets of data from a dropdown (select) on top of the page. When selecting a new value in the dropdown, the content of the multi-column should change accordingly, with all other columns unchanged.
Please notice that the number of rows is unknown (varying from user to user) and that the script should be able to handle 200+ rows without making scripting too heavy.
We imagine that all multicolumn data is preloaded upon page load, and thus can be called immediately from the dropdown, which is preferred to ie. ajax calls to the database upon each change of the dropdown.
We imagine that the solution make use of javascript or jquery, and will be as lightweight in both scripting and html as possible, ie. that each cell is not supposed to be defined in the javascript and that the entire table is not loaded 9 times upon pageload.