August 2003 Technical Tip HTML table tricks with JavaScript

JavaScript is often used to enhance to the appearance and functionality of web pages. In this article I will show you how JavaScript can be used to create better tables. In particular, the techniques shown here improve the maintainability and visual appeal of a table.

Coding of tables, with its associated <TR> and <TD> tags, can be a very tedious process. For example:

<tr><td>CDT060</td><td>Data Representation</td><td>1</td></tr>
<tr><td>CDT020</td><td>Hands-on TSO/ISPF</td><td>2</td></tr>
<tr><td>CDT050</td><td>JCL by Example</td><td>3</td></tr>
<tr><td>CDT100</td><td>Business Programming Logic</td><td>2</td></tr>
<tr><td>CDT110</td><td>COBOL Fundamentals</td><td>5</td></tr>
<tr><td>CDT120</td><td>COBOL Intermediate</td><td>5</td></tr>
<tr><td>CDT030</td><td>Advanced JCL for COBOL Pgmrs</td><td>2</td></tr>
<tr><td>CDT180</td><td>VSAM for COBOL Programmers</td><td>2</td></tr>
<tr><td>CDT500</td><td>CICS Command Level Workshop</td><td>5</td></tr>

Imagine that this table is much larger. Development and maintenance of the table could become quite a headache. One solution is to attempt to separate the data from its presentation (always a worthy objective!) We could store the data in a table:

var courses =
    [ [ "CDT060", "Data Representation"          , "1" ],
      [ "CDT020", "Hands-on TSO/ISPF"            , "2" ],
      [ "CDT050", "JCL by Example"               , "3" ],
      [ "CDT100", "Business Programming Logic"   , "2" ],
      [ "CDT110", "COBOL Fundamentals"           , "5" ],
      [ "CDT120", "COBOL Intermediate"           , "5" ],
      [ "CDT030", "Advanced JCL for COBOL Pgmrs" , "2" ],
      [ "CDT180", "VSAM for COBOL Programmers"   , "2" ],
      [ "CDT500", "CICS Command Level Workshop"  , "5" ] ] ;

and use a for loop to show each element of that table. Note that the presentation logic shown here would be unchanged regardless of the number of rows in the table:

for (row = 0; row < courses.length; row++)
{
    for (clm = 0; clm < 3; clm++)
        document.writeln( "<td>" + courses[row][clm] + "</td>" );
    document.writeln("</tr>");
}

Some web page designers will shade every other row of a table in order to improve its readability. While pleasing to the reader, this makes maintenance of the original HTML code even more tedious! But here's a clever trick with JavaScript. We can use the modulus division operator (%) to see if we are working with an even or odd row, and shade accordingly. All we have to do is add these four lines to the top of the outer for loop:

if (row % 2 == 0)
   document.writeln( "<tr bgcolor = \"#CCCCCC\">");
else
   document.writeln( "<tr bgcolor = \"#FFFFFF\">");

Our finished table appears as follows:

You can download the complete source code for this example at http://www.caliberdt.com/tips/TableTricks.htm. (Choose View, Source.)

This article is based on my solution to a question posed by a recent student. If you have a question, please feel free to write me at bill.qualls@caliberdt.com


Go to the articles index. Written by Bill Qualls. Copyright 2003 by Caliber Data Training 800.938.1222