Hide and Restore Rows and Columns

Rob Stehle Mar 30, 2007

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://www.javascriptsource.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>

Other

Download the images using the URL below [right-click to save the graphic]:

Download the images here

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details