 | Level: Introductory Shelley Saxena (shelleys@us.ibm.com), Developer, IBM WebSphere Site Analyzer
01 May 2001 The HTML table tag allows users to organize content in a Web page efficiently and in an easily readable form. However, this tag has limitations if you want to do something more than just display the data. You can use Java applets, but they take forever to load and are cumbersome. In this article, Shelley describes how users can create a cross-browser table with DHTML and JavaScript, which does most of the things that a table component written in Java might do.
Browser type
One of the problems with working in DHTML and JavaScript is
that Netscape’s implementation is different from that of Internet Explorer
in a number of ways. So one of the first things you need to do
is write a small script that determines the level and type of browser. On the
client browser, this can be accomplished with the following JavaScript function in Listing 1.
Listing 1
function UserAgent() {
var b=navigator.appName;
if (b=="Netscape") this.b="ns";
else if (b=="Microsoft Internet Explorer") this.b="ie";
else this.b=b;
this.version=navigator.appVersion;
this.v=parseInt(this.version);
this.ns=(this.b=="ns" && this.v>=4);
this.ns4=(this.b=="ns" && this.v==4);
this.ns5=(this.b=="ns" && this.v==5);
this.ie=(this.b=="ie" && this.v>=4);
this.ie4=(this.version.indexOf('MSIE 4')>0);
this.ie5=(this.version.indexOf('MSIE 5')>0);
this.ie55=(this.version.indexOf('MSIE 5.5')>0);
}
|
Please note that instead of writing this lengthy function,
you could have done something as simple as Listing 2.
Listing 2
If (document.layers) {
// netscape code
}
else
if (document.all) {
//IE code
}
|
However, the first approach is more structured, gives the
exact browser version, and leaves room for future expansion. See Listing 3 for the complete browser identification code.
Listing 3
function UserAgent() {
var b=navigator.appName;
if (b=="Netscape") this.b="ns";
else if (b=="Microsoft Internet Explorer") this.b="ie";
else this.b=b;
this.version=navigator.appVersion;
this.v=parseInt(this.version);
this.ns=(this.b=="ns" && this.v>=4);
this.ns4=(this.b=="ns" && this.v==4);
this.ns5=(this.b=="ns" && this.v==5);
this.ie=(this.b=="ie" && this.v>=4);
this.ie4=(this.version.indexOf('MSIE 4')>0);
this.ie5=(this.version.indexOf('MSIE 5')>0);
this.ie55=(this.version.indexOf('MSIE 5.5')>0);
}
at=new UserAgent();
|
Cell control
Next you create a control to display the data, akin to a cell
in a table. You do this by creating a JavaScript object, BaseLayer, which has a
dynamic layer at its core. The dynamic layers are created as follows in Listing 4.
Listing 4
if (at.ns4) {
if (this.w=="100%") this.lyr=new Layer(window.innerWidth);
else this.lyr=new Layer(this.w);
}
else if (at.ie4)
{
var code='
'
document.body.insertAdjacentHTML("beforeEnd", code);
this.lyr=document.all[index];
}
else if (at.ie5 || at.ns5) {
this.lyr=document.createElement("DIV");
this.lyr.style.position="absolute";
this.lyr.id=index;
document.body.appendChild(this.lyr);
}
|
Download this zip file with a sample of complete usage.
Table
Now you are ready to write the table code, which will be somewhat independent of the browser type. The table object is defined in Listing 5.
Listing 5
function Table(nRows, nCols)
{
this.nRows = nRows||0;
this.nCols = nCols||0;
//create an array to hold the data for the cells
this.data = new Array(nRows);
for (i=0; i<nRows;i++)
{
this.data[i] = new Array(nCols);
}
//create an array to hold the layers for the cells
this.cells = new Array(nRows);
for (k=0;k<nRows;k++)
{
this.cells[k] = new Array(nCols);
}
//other variables to hold options


//functions for doing stuff


}
|
As you might have noticed, the table object definition does not
have browser-specific code. That complexity is conveniently hidden in the BaseLayer
object. If you want a property in addition to the properties declared in the
object, you need to either modify the object definition or specify the property directly
for the object variable. See Listing 6.
Listing 6
var table = new Table(10,10);
table.newProperty = newPropertyValue;
|
View the complete table code here.
Table initialization
To use the table in a Web page, initialize the object as follows in Listing 7.
Listing 7
var rows = 4, cols = 4;
var columnWidths = [100,150,100,150];
var myData = new Array(rows);
for (i=0;i<rows;i++)
{
myData[i] = new Array(cols);
for (j=0;j<cols;j++)
myData[i][j] = "("+i+","+j+")";
}
myTable = new Table(rows,cols);
myTable.setTableData(myData);
myTable.paint();
|
For a sample of complete usage, see Listing 8 or >download this zip file.
Special features
Here is a list of features that make this table useful:
- You can specify the number of rows and columns on initialization and then increase or decrease them at run time. The rows and columns can be added at the end or inserted in the middle of the table.
- You can hide or show any row or column at run time.
- You can delete any row or column from the table at run time.
- You can swap two columns.
- You can sort the table based upon any column. The code can be customized to sort on rows instead of columns.
- You can resize the columns by dragging a cell in that column.
- You can customize the column widths and row height.
- It has a row selection feature that, if enabled, highlights the currently selected row with a different customizable color.
- It has a hover help feature that, if enabled, will display hover help for each cell, when cursor is held over the cell.
- You can set the data for any cell at run time.
Summary
You do not have to settle for HTML controls. DHTML and
JavaScript offer rich features that can be harvested by developers to create
custom Web controls. The cross-browser DHTML table is an example of one such
control. Due to organization of code in the form of objects, it can be
incorporated very easily into your Web page. You can also use the BaseLayer code
to create browser-independent dynamic layers. All you have to do is import the
corresponding JavaScript files in your code as follows in Listing 9.
Listing 9
<SCRIPT language="JAVASCRIPT" src="Browser.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="BaseLayer.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="Table.js"></SCRIPT>
|
Download | Description | Name | Size | Download method |
|---|
| mple code of complete usage | table.zip | 7 KB | HTTP |
|---|
Resources
- For DHTML tips, an excellent source is Dynamic Drive.
- In this excerpt from his book
Beginning JavaScript
, Paul Wilton shows you how to create Dynamic HTML in Internet Explorer 4+ using JavaScript.
- Check out this site, to play around with some fun scripts.
- Download JavaScript and other free tools at the IBM Ease of Use site.
About the author | | |
Shelley Saxena is a user interface developer with the WebSphere Site Analyzer group. He has more than four years of tools and UI development experience. You can contact him at shelleys@us.ibm.com. |
Rate this page
| |
