Hide & Show Rows and Columns
<html>
<head>
<title>H&SColumns.html</title>
<script type="text/javascript">
<!--
/*
http://javascripts.com
Rob Stehle - http://www.oddrob.com */
var TotalRows = 4;
var TotalCols = 5;
var aRowsOff = new Array();
var aColsOff = new Array();
var isIE = false
if (document.all) isIE = true
//----------------------------------------------------------
function HideRow(r){
if(aRowsOff.length < TotalRows-1){ //don't remove the last row
var RowOff = 'Row'+r;
var wid = eval('document.all.'+RowOff);
wid.style.display = 'none';
AddToArray(r,aRowsOff);
RowBackMsg();
}
}
//----------------------------------------------------------
function ShowRow(r){
var RowOn = 'Row'+r;
var wid = eval('document.all.'+RowOn);
if (isIE) {wid.style.display = 'block';}
else{ wid.style.display = 'table-row';}
RemoveFromArray(r,aRowsOff);
RowBackMsg();
}
//----------------------------------------------------------
function HideCol(c){
if(aColsOff.length < TotalCols-1){ //don't remove the last column
var wid
for (var r=0; r<=TotalRows; r++){
//alert('document.all.R'+r+'C'+c);
wid = eval('document.all.R'+r+'C'+c);
wid.style.display = 'none';
}
AddToArray(c,aColsOff);
ColBackMsg();
}
}
//----------------------------------------------------------
function ShowCol(c){
var wid
for (var r=0; r<=TotalRows; r++){
//alert('document.all.R'+r+'C'+c);
wid = eval('document.all.R'+r+'C'+c);
if (isIE) {wid.style.display = 'block';}
else{ wid.style.display = 'table-cell';}
}
RemoveFromArray(c,aColsOff);
ColBackMsg();
}
//----------------------------------------------------------
function ColBackMsg(){
var msg ="";
if(aColsOff.length>0) msg ="Restore Col # ";
for (i=0; i<=aColsOff.length-1; i++){
//alert('element='+i+' value='+aRowsOff[i]);
msg = msg + '<A HREF="javascript:ShowCol(''+ aColsOff[i] +'');"><B>'+aColsOff[i]+'</B></A>, '
}
document.getElementById('MsgCols').innerHTML=msg;
}
//----------------------------------------------------------
function RowBackMsg(){
var msg ="";
if(aRowsOff.length>0) msg ="Restore Row # ";
for (i=0; i<=aRowsOff.length-1; i++){
//alert('element='+i+' value='+aRowsOff[i]);
msg = msg + '<A HREF="javascript:ShowRow(''+ aRowsOff[i] +'');"><B>'+aRowsOff[i]+'</B></A>, '
}
document.getElementById('MsgRows').innerHTML=msg;
}
//----------------------------------------------------------
function RemoveFromArray(Val,aryL) {
for (var i=0;i<aryL.length;i++) {
if (Val == aryL[i]) {
aryL.splice(i,1);
break;
}
}
}
//----------------------------------------------------------
function AddToArray(Val,aryL) {
aryL[aryL.length] = Val;
//alert(Val + ' - ' + aryL[aryL.length-1]);
}
//-->
</script>
</head>
<body>
<table border="0">
<tr>
<td width="300">
<table border="0" cellspacing="3" cellpadding="5">
<tr id="Row0">
<td id="R0C0" style=""> </td>
<td id="R0C1" style="" align="center"><a href="javascript:HideCol('1');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C2" style="" align="center"><a href="javascript:HideCol('2');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C3" style="" align="center"><a href="javascript:HideCol('3');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C4" style="" align="center"><a href="javascript:HideCol('4');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C5" style="" align="center"><a href="javascript:HideCol('5');"><img src="close.gif" border="0" alt="close"></a></td>
</tr>
<tr id="Row1" style="">
<td id="R1C0" style=""><a href="javascript:HideRow('1');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R1C1" style="background-color:#eeeeee;">R1C1</td>
<td id="R1C2" style="background-color:#eeeeee;">R1C2</td>
<td id="R1C3" style="background-color:#eeeeee;">R1C3</td>
<td id="R1C4" style="background-color:#eeeeee;">R1C4</td>
<td id="R1C5" style="background-color:#eeeeee;">R1C5</td>
</tr>
<tr id="Row2" style="">
<td id="R2C0" style=""><a href="javascript:HideRow('2');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R2C1" style="background-color:#eeeeee;">R2C1</td>
<td id="R2C2" style="background-color:#eeeeee;">R2C2</td>
<td id="R2C3" style="background-color:#eeeeee;">R2C3</td>
<td id="R2C4" style="background-color:#eeeeee;">R2C4</td>
<td id="R2C5" style="background-color:#eeeeee;">R2C5</td>
</tr>
<tr id="Row3" style="">
<td id="R3C0" style=""><a href="javascript:HideRow('3');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R3C1" style="background-color:#eeeeee;">R3C1</td>
<td id="R3C2" style="background-color:#eeeeee;">R3C2</td>
<td id="R3C3" style="background-color:#eeeeee;">R3C3</td>
<td id="R3C4" style="background-color:#eeeeee;">R3C4</td>
<td id="R3C5" style="background-color:#eeeeee;">R3C5</td>
</tr>
<tr id="Row4" style="">
<td id="R4C0" style=""><a href="javascript:HideRow('4');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R4C1" style="background-color:#eeeeee;">R4C1</td>
<td id="R4C2" style="background-color:#eeeeee;">R4C2</td>
<td id="R4C3" style="background-color:#eeeeee;">R4C3</td>
<td id="R4C4" style="background-color:#eeeeee;">R4C4</td>
<td id="R4C5" style="background-color:#eeeeee;">R4C5</td>
</tr>
</table>
</td>
<td width="150" valign="top">
<div id="MsgRows"> </div>
</td>
<td width="150" valign="top">
<div id="MsgCols"> </div>
</td>
</tr>
</table>
<head>
<title>H&SColumns.html</title>
<script type="text/javascript">
<!--
/*
http://javascripts.com
Rob Stehle - http://www.oddrob.com */
var TotalRows = 4;
var TotalCols = 5;
var aRowsOff = new Array();
var aColsOff = new Array();
var isIE = false
if (document.all) isIE = true
//----------------------------------------------------------
function HideRow(r){
if(aRowsOff.length < TotalRows-1){ //don't remove the last row
var RowOff = 'Row'+r;
var wid = eval('document.all.'+RowOff);
wid.style.display = 'none';
AddToArray(r,aRowsOff);
RowBackMsg();
}
}
//----------------------------------------------------------
function ShowRow(r){
var RowOn = 'Row'+r;
var wid = eval('document.all.'+RowOn);
if (isIE) {wid.style.display = 'block';}
else{ wid.style.display = 'table-row';}
RemoveFromArray(r,aRowsOff);
RowBackMsg();
}
//----------------------------------------------------------
function HideCol(c){
if(aColsOff.length < TotalCols-1){ //don't remove the last column
var wid
for (var r=0; r<=TotalRows; r++){
//alert('document.all.R'+r+'C'+c);
wid = eval('document.all.R'+r+'C'+c);
wid.style.display = 'none';
}
AddToArray(c,aColsOff);
ColBackMsg();
}
}
//----------------------------------------------------------
function ShowCol(c){
var wid
for (var r=0; r<=TotalRows; r++){
//alert('document.all.R'+r+'C'+c);
wid = eval('document.all.R'+r+'C'+c);
if (isIE) {wid.style.display = 'block';}
else{ wid.style.display = 'table-cell';}
}
RemoveFromArray(c,aColsOff);
ColBackMsg();
}
//----------------------------------------------------------
function ColBackMsg(){
var msg ="";
if(aColsOff.length>0) msg ="Restore Col # ";
for (i=0; i<=aColsOff.length-1; i++){
//alert('element='+i+' value='+aRowsOff[i]);
msg = msg + '<A HREF="javascript:ShowCol(''+ aColsOff[i] +'');"><B>'+aColsOff[i]+'</B></A>, '
}
document.getElementById('MsgCols').innerHTML=msg;
}
//----------------------------------------------------------
function RowBackMsg(){
var msg ="";
if(aRowsOff.length>0) msg ="Restore Row # ";
for (i=0; i<=aRowsOff.length-1; i++){
//alert('element='+i+' value='+aRowsOff[i]);
msg = msg + '<A HREF="javascript:ShowRow(''+ aRowsOff[i] +'');"><B>'+aRowsOff[i]+'</B></A>, '
}
document.getElementById('MsgRows').innerHTML=msg;
}
//----------------------------------------------------------
function RemoveFromArray(Val,aryL) {
for (var i=0;i<aryL.length;i++) {
if (Val == aryL[i]) {
aryL.splice(i,1);
break;
}
}
}
//----------------------------------------------------------
function AddToArray(Val,aryL) {
aryL[aryL.length] = Val;
//alert(Val + ' - ' + aryL[aryL.length-1]);
}
//-->
</script>
</head>
<body>
<table border="0">
<tr>
<td width="300">
<table border="0" cellspacing="3" cellpadding="5">
<tr id="Row0">
<td id="R0C0" style=""> </td>
<td id="R0C1" style="" align="center"><a href="javascript:HideCol('1');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C2" style="" align="center"><a href="javascript:HideCol('2');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C3" style="" align="center"><a href="javascript:HideCol('3');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C4" style="" align="center"><a href="javascript:HideCol('4');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R0C5" style="" align="center"><a href="javascript:HideCol('5');"><img src="close.gif" border="0" alt="close"></a></td>
</tr>
<tr id="Row1" style="">
<td id="R1C0" style=""><a href="javascript:HideRow('1');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R1C1" style="background-color:#eeeeee;">R1C1</td>
<td id="R1C2" style="background-color:#eeeeee;">R1C2</td>
<td id="R1C3" style="background-color:#eeeeee;">R1C3</td>
<td id="R1C4" style="background-color:#eeeeee;">R1C4</td>
<td id="R1C5" style="background-color:#eeeeee;">R1C5</td>
</tr>
<tr id="Row2" style="">
<td id="R2C0" style=""><a href="javascript:HideRow('2');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R2C1" style="background-color:#eeeeee;">R2C1</td>
<td id="R2C2" style="background-color:#eeeeee;">R2C2</td>
<td id="R2C3" style="background-color:#eeeeee;">R2C3</td>
<td id="R2C4" style="background-color:#eeeeee;">R2C4</td>
<td id="R2C5" style="background-color:#eeeeee;">R2C5</td>
</tr>
<tr id="Row3" style="">
<td id="R3C0" style=""><a href="javascript:HideRow('3');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R3C1" style="background-color:#eeeeee;">R3C1</td>
<td id="R3C2" style="background-color:#eeeeee;">R3C2</td>
<td id="R3C3" style="background-color:#eeeeee;">R3C3</td>
<td id="R3C4" style="background-color:#eeeeee;">R3C4</td>
<td id="R3C5" style="background-color:#eeeeee;">R3C5</td>
</tr>
<tr id="Row4" style="">
<td id="R4C0" style=""><a href="javascript:HideRow('4');"><img src="close.gif" border="0" alt="close"></a></td>
<td id="R4C1" style="background-color:#eeeeee;">R4C1</td>
<td id="R4C2" style="background-color:#eeeeee;">R4C2</td>
<td id="R4C3" style="background-color:#eeeeee;">R4C3</td>
<td id="R4C4" style="background-color:#eeeeee;">R4C4</td>
<td id="R4C5" style="background-color:#eeeeee;">R4C5</td>
</tr>
</table>
</td>
<td width="150" valign="top">
<div id="MsgRows"> </div>
</td>
<td width="150" valign="top">
<div id="MsgCols"> </div>
</td>
</tr>
</table>
</body>
</html>