View Full Version : Hide / Unhide table columns

11-01-2011, 12:39 PM
I use this to hide table columns when not needed like before printing tables.
The + character in the header columns is displayed to indicate that there is a hidden column.

All I do is to wrap the innerHTML of the cells by +<!-- A@
and B@ --> so the original header cell contents is treated as comment now only displaying +.
For data cell the comment starts with &nbsp;<!-- A@ to
only dislay a blank and hide the rest.

<table id=t >
<tr><th onclick="show(0,'t');">1</th><th onclick="show(1,'t');">2<br>2</th><th>3</th><th onclick="show(3,'t');">4</th></TR>
function show(ci,id){
var obj=document.getElementById(id);
var i,arr=[],n=obj.rows.length;
arr=obj.rows[0].cells[ci].innerHTML.split('+<!-- A@');
if(arr.length===2){ // cells are hidden
arr=arr[1].split('B@ -->');
arr=obj.rows[i].cells[ci].innerHTML.split('<!-- A@');
arr=arr[1].split('B@ -->');
} else { // hide cells
obj.rows[0].cells[ci].innerHTML='+<!-- A@'+ obj.rows[0].cells[ci].innerHTML+'B@ -->';
obj.rows[i].cells[ci].innerHTML='&nbsp;<!-- A@'+ obj.rows[i].cells[ci].innerHTML+'B@ -->';

Some more code for other things can be found at :http://www.hgsweb.de