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.

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.

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.

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();

Back to top

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.

  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.

Back to top

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.

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
 &#31;

&#31;
  //functions for doing stuff
 &#31;

&#31;
}

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.

var table = new Table(10,10);
table.newProperty = newPropertyValue;

View the complete table code here.

Back to top

Table initialization

To use the table in a Web page, initialize the object as follows in 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.

Back to top

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.

Back to top

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.

<SCRIPT language="JAVASCRIPT" src="Browser.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="BaseLayer.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="Table.js"></SCRIPT> 

Back to top

Download

Information about download methods

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

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Browser type
• Cell control
• Table
• Table initialization
• Special features
• Summary
• Download
• Resources
• About the author
• Comments

Next steps from IBM

Spring, JRuby, and Ajax development is easier with WebSphere Application Server - a smart Java 5 and J2EE Web services-based application server.

---

• Try: The no-charge WebSphere Application Server Community Edition is a pre-integrated, lightweight Java 5 application server built on Apache Tomcat and other best-of-breed open source software such as OpenEJB, Apache Axis, and Apache Derby.
• Article: The article leverage the Spring Framework and the WebSphere Application Server to improve your J2EE project productivity.
• Tutorial: See how the free WebSphere Application Server and XML can improve the efficiency of your JRuby on Rails and Ajax development.
• Buy: WebSphere Application Server - Express

My developerWorks community

Dig deeper into Web development on developerWorks

Calling all developers

Download no charge Lotus Domino Designer

Special offers