...

View Full Version : Hide / Unhide table columns



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





<html>
<body>
<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>
<tr><td>a</td><td>111111</td><td>b</td><td></td></TR>
<tr><td></td><td>2222222</td><td>c</td><td></td></TR>
<tr><td></td><td>3333333333</td><td></td><td></td></TR>
<tr><td></td><td>444</td><td></td><td>e</td></TR>
</table>
<script>
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@ -->');
obj.rows[0].cells[ci].innerHTML=arr[0];
for(i=1;i<n;i++){
arr=obj.rows[i].cells[ci].innerHTML.split('<!-- A@');
arr=arr[1].split('B@ -->');
obj.rows[i].cells[ci].innerHTML=arr[0];
}
} else { // hide cells
obj.rows[0].cells[ci].innerHTML='+<!-- A@'+ obj.rows[0].cells[ci].innerHTML+'B@ -->';
for(i=1;i<n;i++){
obj.rows[i].cells[ci].innerHTML='&nbsp;<!-- A@'+ obj.rows[i].cells[ci].innerHTML+'B@ -->';
}
}
}
</script>
</body>
</html>



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum