The JavaScript Source: Miscellaneous : Hide and Restore Rows and Columns

General

This script displays a table and allows the user to remove and restore both rows and columns. This allows the user to remove the details and products that he is not interested in.


Product	SKU	CPU	RAM	HD
Desktop	DT103	3.2 MHz	1 GB	120 GB
Laptop	LT455	2.6 MHz	512 MB	80 GB
Palm	Treo	312 MHz	32 MB	n/a

Notes

Created by: Rob Stehle
Web Site: http://www.oddrob.com
Posted: March 30, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: JS_HideRowCol.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: 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]);
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="JS_HideRowCol.js"></script>

Body

Paste this code into the BODY section of your HTML document

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

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

Other

User Comments

2. From: Raja Raman S
04/03/2007 09:32:47

1. From: Susan
03/31/2007 18:19:40

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

Other

User Comments

2. From: Raja Raman S04/03/2007 09:32:47

1. From: Susan03/31/2007 18:19:40

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

2. From: Raja Raman S
04/03/2007 09:32:47

1. From: Susan
03/31/2007 18:19:40