JavaScript - Hiding Table Columns

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.

Using the capabilities in JavaScript to access the DOM and change CSS style properties it is quite easy to achieve the desired column manipulation.

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

Next an easy way of calling some JavaScript is required so that the user can cause the columns to be shown or hidden. A nice way of doing this is to use a form with some checkboxes in it, each checkbox representing a column that can be manipulated. The code that is to change the column visibility needs a boolean value to indicate show or hide, and a checkbox gives us just that. So, by assigning some JavaScript code to the checkbox onclick event handler the associated column can be shown or hidden by checking or unchecking the box.

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.

<script language="javascript">

// Set the default "show" mode to that specified by W3C DOM
// compliant browsers

var showMode = 'table-cell';

// However, IE5 at least does not render table cells correctly
// using the style 'table-cell', but does when the style 'block'
// is used, so handle this

if (document.all) showMode='block';

// This is the function that actually does the manipulation

function toggleVis(btn){

	// First isolate the checkbox by name using the
	// name of the form and the name of the checkbox

	btn   = document.forms['tcol'].elements[btn];

	// Next find all the table cells by using the DOM function
	// getElementsByName passing in the constructed name of
	// the cells, derived from the checkbox name

	cells = document.getElementsByName('t'+btn.name);

	// Once the cells and checkbox object has been retrieved
	// the show hide choice is simply whether the checkbox is
	// checked or clear

	mode = btn.checked ? showMode : 'none';

	// Apply the style to the CSS display property for the cells

	for(j = 0; j < cells.length; j++) cells[j].style.display = mode;
}

</script>