Use JavaScript to Create a Scrolling Grid | 3

Use JavaScript to Create a Scrolling Grid

An init method is used to locate the row/column header and value <span> elements defined during the rendering phase. This is easily done thanks to the document.getElementsByTagName() method. This method gathers all the elements of a given tag name and returns them in order in an array. The column headers come first, then each row with a row header at the beginning of each row (this follows the way in which they were rendered).

A similar technique is used to find the <td> elements used for the scroll indicators; first the <div> elements are enumerated, the second one contains the vertical scroll indicator and the tenth contains the horizontal one. These <span> and <td> elements are stored in arrays held by the Grid object so they may be used by the fill method.

Grid.prototype.init = function()
{
   // if already initialized, return
   if ( this.oTable ) return;

   this.oTable = document.getElementById(this.name);

   // get all <span> elements within the table
   var aSpan = this.oTable.getElementsByTagName('span');
   var n = 0;
   // the first few are all column headers
   this.aColSpan = new Array;
   for ( var j = 0; j < this.data.nCol; j++ )
      this.aColSpan.push(aSpan[n++]);
  
   // the remainder are row headers and cells
   this.aRowSpan = new Array;
   this.aCellSpan = new Array;
   for ( var i = 0; i < this.data.nRow; i++ )
   {
      this.aRowSpan.push(aSpan[n++]);

      this.aCellSpan.push(new Array());
      for ( j = 0; j < this.data.nCol; j++ )
         this.aCellSpan[i].push(aSpan[n++]);
   }  

   // get all the <div> elements
   var aDiv = this.oTable.getElementsByTagName('div');

   // the vertical scroll is in aDiv[1]
   this.aVerticalTD = aDiv[1].getElementsByTagName('td');

   // the horizontal scroll is in aDiv[9]
   this.aHorizontalTD = aDiv[9].getElementsByTagName('td');
}

All that is left now is to demonstrate how the Grid class is used. In fact, all that is required is to instantiate a Grid object wherever it is required within the <body> of the web page, supplying a unique name and a data object with the required properties defined.

<script>
var data =
{
   nCol:6,
   nRow:10,
   nCellWidth:70,
   nCellHeight:20,
   colHeaders:["USD", "EUR","GBP", ...],
   rowHeaders:["USD", "EUR","GBP", ...],
   values:[["-",1.1,1.8,...],[...], ...]
};
new Grid('theGrid', data);
</script>

Conclusion

In this article I have outlined a simple Grid class that dynamically generates a grid with scrollbars so that large tables of data can be squeezed into a small area on a web page. This allows vital information such as row and column headers or surrounding text to be visible while still having access to the full table of data. For a complete listing of the Grid code and to view a working demonstration, click here.

About the Author

Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.silver-daggers.co.uk for more details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk


Created: March 27, 2003
Revised: March 17, 2004

URL: http://webreference.com/programming/javascript/gr/column4/1