| home / programming / javascript / gr / column4 / 1 |   [previous] |
|
|
|
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()this.oTable = document.getElementById(this.name);
// get all <span> elements within the table 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>
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.
Guyon Roche is a freelance web developer in
| home / programming / javascript / gr / column4 / 1 | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: March 17, 2004
URL: http://webreference.com/programming/javascript/gr/column4/1
