Skip to main content

skip to main content

developerWorks  >  Web development  >

A cross-browser DHTML table

Bypass the limitations of HTML with this custom Web control

developerWorks
Document options

Document options requiring JavaScript are not displayed

Sample code


Rate this page

Help us improve this content


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



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.


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.


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.



Back to top


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.



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.


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

DescriptionNameSizeDownload method
mple code of complete usagetable.zip7 KBHTTP
Information about download methods


Resources



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


Please take a moment to complete this form to help us better serve you.



 


 


Not
useful
Extremely
useful
 


Share this....

digg Digg this story del.icio.us del.icio.us Slashdot Slashdot it!



Back to top