It is often desirable with large table output from a script generated page to be able to allow the user to dynamically choose which table columns they see. Consider for example a page that returns information from a database that may have many columns of data. It would be possible to include code in the server code that generates the page to take account of the users column preferences and only output that particular data.
This would work fine until the user wants to add or remove a column, at which time the page would have to be regenerated with the new column set. Instead, by sending all the columns of data and including functionality on the page to allow the user to select which columns they viewed, the page need only be generated once.
How can this be done ?
Let us use a simple example table with 2 rows of 4 columns in it.
<table border=1> <tr> <td name="tcol1" id="tcol1" class="bold">column 1 text</td> <td name="tcol2" id="tcol2">column 2 text</td> <td name="tcol3" id="tcol3" class="italic">column 3 text</td> <td name="tcol4" id="tcol4">column 4 text</td> </tr> <tr> <td name="tcol1" id="tcol1" class="bold">column 1 text</td> <td name="tcol2" id="tcol2">column 2 text</td> <td name="tcol3" id="tcol3" class="italic">column 3 text</td> <td name="tcol4" id="tcol4">column 4 text</td> </tr> </table>
Notice that the <td> tags make use of the id and name attributes so that the columns can be accessed simply via the DOM. It is important that the value assigned to each column's id and name attributes are unique within the page otherwise changing one table will result in changing another aswell. Both the id and name attributes are required so that DOM compliant browsers and IE5 can find the table cells via the DOM. The name attribute is used by IE5. The class attribute is also used to associate a CSS style to the columns, but this is purely so that the columns can be distinguished from one another more easily, and has no bearing on the column manipulation code.
The resulting table looks like this.
Here is the HTML for the form, with the actual form above. The form has been named, again this is to allow simple access to it via the DOM. Also notice that the checkboxes have been checked by default. This is so that the state of the table columns and the checkboxes are consistent when the page is first rendered.
<form name="tcol" onsubmit="return false"> Show columns <input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> 1 <input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> 2 <input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> 3 <input type=checkbox name="col4" onclick="toggleVis(this.name)" checked> 4 </form>
The checkboxes have also been named so that the code that changes the visiblity of the table columns does not have too much complicated work to do. It can be seen that the names of the checkboxes are very similar to the names of the table columns, so much so that the table column names can be constructed simply by prepending the letter t to the checkbox name.
Okay so what does the code look like. It is actually quite small once the comments have been removed.
Content of this page Copyright © Robert Quince 1996 - 2005.