Skip to main content

A cross-browser DHTML table

Bypass the limitations of HTML with this custom Web control

Shelley Saxena, Developer, IBM WebSphere Site Analyzer
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.

Summary:  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.

Date:  01 May 2001
Level:  Introductory
Activity:  3110 views

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
 &#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.


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

DescriptionNameSizeDownload method
mple code of complete usagetable.zip7 KB HTTP

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

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.

Comments (Undergoing maintenance)



Trademarks  |  My developerWorks terms and conditions

Help: Update or add to My dW interests

What's this?

This little timesaver lets you update your My developerWorks profile with just one click! The general subject of this content (AIX and UNIX, Information Management, Lotus, Rational, Tivoli, WebSphere, Java, Linux, Open source, SOA and Web services, Web development, or XML) will be added to the interests section of your profile, if it's not there already. You only need to be logged in to My developerWorks.

And what's the point of adding your interests to your profile? That's how you find other users with the same interests as yours, and see what they're reading and contributing to the community. Your interests also help us recommend relevant developerWorks content to you.

View your My developerWorks profile

Return from help

Help: Remove from My dW interests

What's this?

Removing this interest does not alter your profile, but rather removes this piece of content from a list of all content for which you've indicated interest. In a future enhancement to My developerWorks, you'll be able to see a record of that content.

View your My developerWorks profile

Return from help

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=11549
ArticleTitle=A cross-browser DHTML table
publish-date=05012001
author1-email=shelleys@us.ibm.com
author1-email-cc=

My developerWorks community

Tags

Help
Use the search field to find all types of content in My developerWorks with that tag.

Use the slider bar to see more or fewer tags.

Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).

My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Use the search field to find all types of content in My developerWorks with that tag. Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere). My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).

Special offers