First off, you'll need both the scriptaculous and prototype javascript libraries (both available from script.aulo.us). Once you've downloaded these files, you'll need to reference them in the head of your file:

<script type="text/javascript"
src="scripts/prototype.js"></script>
<script type="text/javascript"
src="scripts/scriptaculous.js"></script>

Then, in your html file, make your list:

<ul id="items_list">
	<li id="item_1">Item 1</li>
	<li id="item_2">Item 2</li>
	<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>

Note that the ul and each li have unique ids. It is also important to note that the ids of the list items must have "_#" at the end (this number must be unique).

Next, add this after the list (because of IE):

<script type="text/javascript"
language="javascript">
Sortable.create("items_list",{dropOnEmpty:true,con
straint:false});
</script>

Cool! It works! But...

Now that you've done this, go ahead and check it out. Cool... You can now sort your list by dragging and dropping! This is all fine and dandy, but how do I actually store this new order in my database?

It's pretty simple actually. In comes "serialize", to make life easy. This little gem creates a string containing information on of the current state of the list being sorted. How do you use it?

var listorder = Sortable.serialize('items_list');

Let's say that you've sorted your list as follows:

• item 3
• item 2
• item 1
• item 4

When invoked, the variable listorder would return as "items_list[]=3&items_list[]=2&items_list[]=1&items_li st[]=4". And this is what you need to update your database. Notice, the values returned are associated to whatever is after the underscore (_) in the id of the list item.

Now that you have this information, you can easily update your database with a simple AJAX call pointing to your php file ('save_items_order.php' in this case):

function saveOrder() {
	listorder = Sortable.serialize('items_list');
	var url = 'save_items_order.php';
	var pars = listorder
		+ '&rnd='
		+ new Date().getTime();
	var myAjax = new Ajax.Request(
		url,
		{
			method: 'post',
			postBody: pars,
			onComplete:  showList
		});
}

Finally, the PHP/mySQL piece:

if($_POST) {
  $items = $_POST['items_list'];
  $i = 1; # will represent the actual order (starting at 1).
  foreach($items as $itemid) {
    $query = "
      UPDATE items_table SET order_col = $i WHERE id_col =
$itemid
    ";
    mysql_query($query);
    $i++;  # add 1 to the current value of i (the next order
in the list).
  }
}

There you have it. An example of how to sort a list, and then store the new order in your database.

Step 1 - Enable script debugging.

Now the process for doing this is obvious. Go to "Tools -> Internet Options... -> Advanced". From here, find "Disable Script Debugging (Internet Explorer)", and "Disable Script Debugging (Other)". Now, follow me here... To enable script debugging, you need to uncheck these boxes. Very intuitive, I know. Once you've unchecked these two boxes, click "OK".

Step 2 - Open up your debugger.

To access your debugger, run your script (i.e. reload your html page, and trigger the JavaScript). A new pop-up message should appear.



Click Yes. Doing so, will bring up another window.



There are three applications available for script debugging: "Visual Studio.Net", "Microsoft Script Debugger" and "Microsoft Script Editor". You may be limited in your choices, however (see image). Choose the debugger from the list, and click Yes. This will bring up the debugger, which will most likely take you to the line of code that is causing the problems.



There you have it. A way to debug JavaScript in IE.

Hints and Other Articles

• Type "javascript:debugger;" in the address and hit enter to open up your debugger.
• Type "if(typeof(res)=="object") debugger;" in your code to launch the debugger at a break point.
• Scripting Debugging in Internet Explorer
• Debug Internet Explorer Javascript
• HOW-TO: Debug JavaScript in Internet Explorer

Hopefully this helps take away some of the pain that is Internet Explorer.

UPDATE - 5/10
It has come to my attention that my co-worker actually uses a modified version of TiddlyWiki called GTDTiddlyWiki.

GTD Tiddly Wiki is a GettingThingsDone adaptation by NathanBowers of JeremyRuston's Open Source TiddlyWiki. The purpose of GTD Tiddly Wiki is to give users a single repository for their GTD lists and support materials so they can create/edit lists, and then print directly to 3x5 cards for use with the HipsterPDA. -- shared.snapgrid.com

***

I noticed a co-worker always entering things into some HTML interface every day. Finally, I had to find out just what this tool was. It turns out, that this tool was what he uses to organize his day. He uses it as his personal To Do list. I know that just knowing this, won't amaze you. The cool thing about this tool, is that all that is involved is a single '.html' file. That's right, he manages his personal life using a single '.html' file.

What? A Single HTML File?

A guy named Jeremy Ruston developed a cool tool called "TiddlyWiki", and it's made and functions completely off of JavaScript and HTML contained in one '.html' file. All you have to do is go to TiddlyWiki, and download this '.html' file and you can get started. Once opened in a browser (preferably Firefox), you can add to it whatever you please. Take a look at what I was able to do in about 2 minutes.

Out of the box, TiddlyWiki offers:

• Browsable with the vast majority of modern desktop browsers on Windows, Macintosh and Linux and including the Nokia770
• Ability to SaveChanges on FireFox under Windows or OS X, InternetExplorer under Windows and Safari and Camino under OS X
• Rich formatting including MonospacedText, ExtendedFormatting, NonWikiWordLinks, WikiWordEscape, PrettyLinks, SubHeadings, BulletPoints, NumberedBulletPoints, Tables, BlockQuotes, HorizontalRules and the ability to use a CustomCssClass.
• Various InterfaceOptions, including the ability to GenerateAnRssFeed, SaveBackups and AutoSave
• KeyboardShortcuts so you can finish editing a tiddler with Control-Enter or abandon it with Escape
• InlineHTML
• ...EmbeddedImages:
• Macros providing rich interactive features, including Sparklines and Gradients
• a flexible OpenSourceLicense
• a liquid CSS layout that can be customised with a CustomStyleSheet
• Extensive StartupParameters to control the behaviour of TiddlyWiki through specially crafted URLs

The Community around TiddlyWiki has extended this basic functionality with a wide range of Plugins and TiddlyWikiAdaptations. -- Jeremy Ruston, www.tiddlywiki.com

getAttribute('style') - The Problem

Using document.getElementById('[id_of_element]').ge tAttribute('style') returns a string in Firefox (ex. "height: 200px"), yet in IE it merely returns an object. Which means additional code to get this into a string.

getAttribute('style') - The Solution

var el = document.getElementById('[id_of_element]');
var styleattribute = el.getAttribute('style');
if (typeof styleattribute == 'string') { // what Firefox returns
    ...
} else if (typeof styleattribute == 'object') { // what IE returns
    styleattribute = styleattribute .cssText;
}

One thing to note here, is that styleattribute.cssText returns ALL CAPS. Meaning: if the element contains style="height:200px;", styleattribute.cssText will return HEIGHT: 200px.

setAttribute('style') - The Problem

This just flat out doesn't work in IE. See entry at quirksmode.org.

setAttribute('style') - The Solution

document.getElementById('[id_of_element]').style.he ight = 250;

So, there you have it. Yet another reason to hate IE. At least there's a solution to the problem, albeit a rather annoying one.

function alternateRowColor(tableid,lightclass,darkclass,overclass) {
    var tableid = document.getElementById(tableid);
    var rows = tableid.tBodies[0].rows;
    for(var ii = 0; ii < rows.length; ii++) {
        var row = rows[ii];
        if(ii % 2) {
             row.className = lightclass;              row.onmouseover = function () {overRow(this.id,overclass);};
             row.onmouseout = function () {overRow(this.id,lightclass);};
        } else {
         &nb sp;  row.className = darkclass;
         &nb sp;  row.onmouseover = function () {overRow(this.id,overclass);};
         &nb sp;  row.onmouseout = function () {overRow(this.id,darkclass);};
        }
    }
}

I've added a nice little row highlighting function to the mouseover and mouseout events called overRow(). This function only adds 3 lines of code:

function overRow(rowid, classname) {
    document.getElementById(rowid).clas sName = classname;
}

The last thing to do is make sure that the alternateRowColor() function gets invoked every time the page loads. Instead of having to place this in the body tag of all pages, all that is needed is one line of code added to the same script that will automatically run the function each time a page loads:

window.onload=function(){ alternateRowColor('alternateRows','light','dark','over');}

That's all there is to it. See it in action.

In order to represent a working example of AJAX, there are a few things we're going to need.

• database
• HTML file
• JavaScript (located within the HTML file in this example)
• ColdFusion file (note: any programming language can be used)
• prototype JavaScript library

The Database

The database used in this example is an extremely basic MS Access database consisting of one table that contains 6 fields:

Now that we know what we are going to be storing, let's take a look at the ".html" file.

HTML File

This file will consist of the form fields needed to populate the database, along with the placeholder we will use to show the information being stored:

<form name="addEmployee">
First Name:<input type="text"
name="FirstName" id="FirstName"
value="" size="30" />
<br />
Last Name:<input type="text"
name="LastName" id="LastName"
value="" size="30" />
<br />
Job Title:<input type="text"
name="JobTitle" id="JobTitle"
value="" size="30" />
<br />
Phone:<input type="text" name="Phone"
id="Phone" value="" size="12"
/>
<br />
Fax:<input type="text" name="Fax"
id="Fax" value="" size="12"
/>
<br />
<input type="button" name="submit"
value="save"
onclick="insertEmployee();"/>
</form>
<div id="EmployeeList"></div> 
//placeholder div

Notice how there is no method or action in the form tag? Both of these will be taken care of by the JavaScript.

The JavaScript

Once you've gotten all the form fields you need, you're now ready to start writing the JavaScript that will handle the AJAX portion. First, make sure you are referencing "prototype.js" (<script src="/scripts/prototype-1.4.0.js"></script>) . Now that prototype is in place, we can begin writing the necessary code to populate the "Employee" table. Notice from the xhtml code (above) the onclick event attached to the save button: onclick="insertEmployee();". This function is going to be called everytime a user clicks the "save" button. Let's take a look at this function:

function insertEmployee() {
	// begin form variables
	var fname = $F('FirstName');
	var lname = $F('LastName');
	var jtitle = $F('JobTitle');
	var phone = $F('Phone');
	var fax = $F('Fax');
	// end form variables
	var url = 'employee.cfm';
	var pars = 'FirstName='
			   + fname
			   + '&LastName='
			   + lname
			   + '&JobTitle='
			   + jtitle
			   + '&Phone='
			   + phone
			   + '&Fax='
			   + fax
			   + '&Action=Insert&rnd='
			   + Math.random()*99999;
	var myAjax = new Ajax.Request(
	url,
	{
	        method: 'post',
	        postBody: pars,
	        onComplete: listEmployees
	});
}

First of all, we're putting the values within each form field into variables. We'll then use these variables to pass them to the ColdFusion file, which in turn will insert these values into the database. The next step is to declare a variable that will contain the actual URL of this CF file. In this example, we're calling this variable url, and we're giving it the value of "employee.cfm". This value tells us that the CF file is located in the same directory as the ".html" file. Now that we have the values of each form field and the URL of the CF file declared, we're going to create another variable "pars" which will contain all the name/value pairs that will be passed to the CF file. In the code, we've written these name/value pairs separated by new lines, which improves readability. As you can see, these name/value pairs are passed to the CF file much like you'd pass them in a URL string. For example:

employee.cfm?FirstName=John&LastName=Doe&JobTitl e=Accountant...

One thing to take note of, however, is the fact that we are passing 2 additional name/value pairs that are not part of the form: "Action=Insert" and "rnd=[a random number]". The "Action=Insert" will make sense when we take a closer look at the CF file. The "rnd=[a random number]" is explained in detail in my previous post.

Now that we've got a good understanding of "pars" and "url", let's take a look at the actual request that we'll use to send to back-end:

    var myAjax = new Ajax.Request(
        url,
        {
            method: 'post',
            postBody: pars,
            onComplete: listEmployees
        });

What the above says, is that we're going to open an XMLHttpRequest that will "POST" the name/value pairs (pars) to "employee.cfm". Then, once the request is complete, the "listEmployees" function will be run. Now that we've got the insert request taken care of, let's take a look at what the CF file is doing on the back-end.

The ColdFusion File - "employee.cfm"

We know that we want to populate the database with the values in the form, and we know that the AJAX request will be "POSTing" this information. Since the request is using the "POST" method, we know we'll have to use the "FORM" variable (not URL) for grabbing the parameters being sent. Let's take a look at the CF code:

<cfif (IsDefined('Form.Action') AND Form.Action
EQ "Insert")>
    <cflock name="Insert"
type="EXCLUSIVE" timeout="30">
		        <cfquery name="insertemployee"
Datasource="employee">
			            INSERT INTO Employee (FirstName, LastName,
JobTitle, Phone, Fax)
			            VALUES ('#Form.FirstName#',
'#Form.LastName#', '#Form.JobTitle#',
'#Form.Phone#', '#Form.Fax#')
		        </cfquery>
    </cflock>
</cfif>

As you can see from the first line, this set of code will not be run unless the "Action" form parameter is defined, and that it's equal to "Insert". This is where the "&Action=Insert" name/value pair, added to the "pars" variable in the JavaScript code, comes into play. The next set of code uses a standard SQL statement to insert the data that is passed into the "Employee" table. The next set of code to get run is the query that will select everything from the "Employee" table, and then return these values in a table:

<cfquery name="listemployees"
datasource="employee">
    SELECT *
    FROM Employee
    ORDER BY LastName
</cfquery>
<table cellpadding="4">
<thead>
    <tr>
        <td><b>Last Name</b></td>
        <td><b>First Name</b></td>
        <td><b>Job Title</b></td>
        <td><b>Phone</b></td>
        <td><b>Fax</b></td>
    </tr>
</thead>
<tbody>
<cfoutput query="listemployees">
    <tr id="#EmpID#">
        <td>#LastName#</td>
        <td>#FirstName#</td>
        <td>#JobTitle#</td>
        <td>#Phone#</td>
        <td>#Fax#</td>
    </tr>
</cfoutput>
</tbody>
</table>

This table is what gets returned to the ".html" page. Remember we said that the "listEmployees" function would be run when the request is completed. It is this function that is responsible for making this table appear on the page:

function listEmployees(originalRequest){
    $('EmployeeList').innerHTML =
originalRequest.responseText;
    var doc = document.addEmployee;
    doc.FirstName.value = '';
    doc.LastName.value = '';
    doc.JobTitle.value = '';
    doc.Phone.value = '';
    doc.Fax.value = '';
}

When this function is run, the innerHTML of the "EmployeeList" placeholder div will contain the table that was created in "employee.cfm". Also added to this function is the clearing out of all the form fields.

There you have it: an example of inserting information into a database using AJAX and ColdFusion. As you can see from this example, you can use any programming language you prefer. The point of this tutorial was to explain the step-by-step process of using AJAX from front-end to back-end to front-end again, all without refreshing the users browser.

You can see this example in action by checking out a sample demo I've created for this tutorial. In this demo, you will see a little more functionality. Feel free to view the source of this file to see how other functions are handled.

Getting Started

First off, you should download an AJAX library. I recommend the Prototype javascript library. What is prototype.js anyway?

Prototype is a JavaScript framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest AJAX library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Basically, a guy named Sam Stephenson spent, I'm sure, an inordinate amount of time writing this great javascript file in order to make life easier on all of us. Using this file makes writing your AJAX code much easier. As mentioned earlier, the hardest part about getting started was finding documentation. So, in order to make it simpler for you, I'm going to include links to the documentation that I used to get started.

• Developer Notes for prototype.js - This documentation was exactly what I needed, and could quite possibly be the only thing you'll need. It contains some really great examples in the beginning of the document, and the contains more detailed information later on. After reading the first few paragraphs, I was able to get started, and then used the rest of the document for reference (this part of the document conveniently happens to be named "Reference for Prototype.js") haha.
• Working With Events In Prototype - How to use prototype with Keystrokes, Mouse Clicks, Mouse Hovers, etc.
• Eas y Ajax with Prototype

What To Watch Out For

Internet Explorer loves to cache everything. This is particularly a problem when you are using AJAX. What works well in Firefox, may not seem like it's working in IE. I learned this the hard way. The application I implemented AJAX on is my personal online checkbook register. So the idea was to allow a user to stay on one page, add a new transaction, submit it, and have the list show the latest transaction while also changing the account balance all without refreshing the window. This worked great in Firefox, yet nothing seemed to be happening in IE. When in actuality, the database inserts were definitely happening, yet the list and account balance refresh was not. It took me a while to figure out what and why this was happening, but finally figured it out when I came across this article "Ajax IE caching issue". It seems as though IE believes that GET requests (method="get") need to be cached, while POST requests do not. This meant changing all my requests from GETs to POSTs. Finding out how to do this took a bit of research as well, so I'm going to just give this to you here (if you already know how to do this, then feel free to ignore the following). The solution, as you'll see is extremely simple (changes are marked in bold & italic):
Example GET request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'get',
      parameters: pars,
      onComplete: runNextFunction
    });
}

Example changed to a POST request:

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

Well there you have it. The IE issue is fixed, right? Well... Not exactly. This solution only seemed to work part of the time. So, after some more digging, I found the definitive solution. Although not elegant, it fixes the problem. That solution is to add a random number parameter onto the end of the parameters that get passed. "Why would this work?" you might ask. Well this random number will basically fool the browser into thinking it has to return a page from a URL it's never been to before, rather than thinking it has it in cache (learn more).

POST Example with Random Number

function insertRow() {
  var url = 'ajax_file.cfm';
  var param1 = $F('p1');
  var param2 = $F('p2');
  var param3 = $F('p3');
  var pars = 'P1='
      + param1
      + '&P2='
      + param2
      + '&P3='
      + param3;
      + '&rnd='
      + Math.random()*99999; //using rather large multiplier to ensure uniqueness
  var myAjax = new Ajax.Request(
    url,
    {
      method: 'post',
      postBody: pars,
      onComplete: runNextFunction
    });
}

I feel that the information in this article is exactly what is needed to get your feet wet with AJAX. I plan to create a tutorial that will walk you through a real world working example of AJAX using ColdFusion and a simple MS Access Database.

• Part I - Header
• Part II - Body
• Part III - Sidebar
• Part IV - Footer
• (links to the above list will be added as the entries are written)

The Header
The masthead consists of the logo and the navigation. This may not seem like a whole lot, yet some really nice CSS code is utilized here, making for some really clean markup, and a nice user experience. We'll start with the logo.
The Logo
The image itself is actually part of the background. Notice, when looking at the XHTML, there is no reference to the logo image itself:

<div id="logo">
    <a href="http://www.tricklin.com" name="top">Tricklin</a>
</div>

The beauty of this is that the logo image is in the background, declared in the CSS. To help clarify, let's take a look at this code:

#logo {
    margin: 0 0 0 6px;
    position:relative;
    float:left;
    width:200px;
}
#logo a {
    height:60px;
    width:200px;
    background: url(http://www.patmullin.com/tricklin/images/tricklin_logo_2 00x60.png) no-repeat;
    text-indent: -9000px;
    display:block;
}
#logo a:hover {
    background-position: 0 -60px;
}

The first section, #logo, acts as the placeholder for the logo image. By looking at this we know that the logo will appear on the left of the screen, and a margin of 6 pixels will keep it from butting directly up against the left edge of the browser window. We also know that since the image is only 200 pixels in width, that is the widest we need this section to be, so it is set to 200 pixels.

The remaining sections, #logo a and #logo a:hover, are what declare the logo image, and the properties that make it clickable. We'll start with the default link state. First, #logo a means that an anchor tag within the "logo" div will aquire these properties. Meaning all other anchor tags will not be affected. That said, the anchor tag inside "#logo" will place the "tricklin_logo_200x60.png" into the background and only show it once (no-repeat). If otherwise declared, the starting point for showing the image is 0 pixels from the left and 0 pixels from the top. As you can see from the actual logo image (above), it's actually 120 pixels in height, yet the image will only appear in an available window that is 60 pixels tall. So the user will only see the top-half of the logo image. So that when the mouse is "hovered (#logo a:hover)" over the logo, the bottom half of the logo will appear in the available window - background-position:0 -60px.

Navigation Menu
Once again, the markup for the navigation is nice and clean. There are no image references in the actual XHTML code. Let's have a look:

<div id="navigation">
    <ul class="nav">
        <li>&l t;a href="http://www.patmullin.com/portfolio.cfm" accesskey="1" class="portfolio"><span>portfolio</span></ a></li>
        <li>&l t;a href="http://www.patmullin.com/contact_me.cfm" accesskey="2" class="contactme"><span>contact me</span></a></li>
        <li>&l t;a href="http://www.patmullin.com/about_me.cfm" accesskey="3" class="aboutme"><span>projects</span></a&g t;</li>
        <li>&l t;a href="http://weblog.patmullin.com" accesskey="4" class="weblog_c"><span>journal</span></a&g t;</li>
    </ul>
</div>

Notice that each "button" has an accesskey associated to it. These were added to improve the accessibility of the site. Since Stuart Robertson does an excellent job explaining accesskeys in his article on A List Apart, I won't go into detail about this.

With some CSS coding, the navigation menu goes from looking like a bulleted list to a horizontal set of buttons:

#navigation ul.nav {
    padding: 0px;
    margin: 0px;
}
#navigation ul.nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#navigation ul.nav li a{
    float:left;
    display: block;
    list-style-type: none;
    margin: 0px;
    padding: 0;
}

Each button in the navigation menu has 3 states (using only 1 image), a mouser over (hover), a mouse out, and an active page state. Each state is represented using the same concept as with the logo:

#navigation ul.nav li a.portfolio, #navigation ul.nav li a.portfolio_c, #navigation ul.nav li a.portfolio:hover{
    width: 90px;
    height: 30px;
    background: url(http://www.patmullin.com/images/portfolio_nav_tab2.png) no-repeat;
}
#navigation ul.nav li a.portfolio{background-position:0 -50px;} // mouse out state
#navigation ul.nav li a.portfolio_c{background-position:0 -100px;} // active page state
#navigation ul.nav li a.portfolio:hover{background-position:0 0;} // mouse over state

So, that's the header in a nutshell. Next, I'll explain the Body, and all the little CSS elements and WordPress plugins used.

<table>
<cfoutput query="EmployeeList">
<cfset rowid = "#EmployeeList.EmployeeID#">
  <tr class="#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#" id="#rowid#" onmouseover="changeBgcolor('#rowid#','rollovercolor');" onmouseout="changeBgcolor('#rowid#','#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#');">
    <td>
    ...
    </td>
  </tr>
</cfoutput>
</table>

Since the main idea here is to alternate the colors between rows, the key set of code from the above example is the following: currentrow MOD 2. What in the heck does this mean?

ColdFusion offers a modulus function (MOD) that returns the remainder (modulus) after a number is divided by a divisor; for example,10 MOD 3 is 1. -- livedocs.macromedia.com

Since even numbers divided by the number 2 will divide evenly (i.e. no remainder), and odd numbers when divided by 2 will not, we use CurrentRow MOD 2.

The CurrentRow variable is one of a few variables that ColdFusion automatically exposes that provide information about the query. These variables are often called query variables. -- livedocs.macromedia.com

Based on what we know now, let's look at the entire "IIF" statement:

#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#

In ColdFusion, the "IIF" statement works like this:

#IIF(conditional statement, RETURN THE EXACT STRING:('value returned if the conditional statement is true'), RETURN THE EXACT STRING:('value returned if the conditional statement is false'))#

To help clarify the above even more, this: class="#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#", as a story would read "if the remainder of the current row divided by the number 2 is greater than zero (0), then the class will equal 'dark', otherwise, the class will be 'light'.

Now that we've taken care of the alternating rows, let's incorporate that 3rd color which will be used for highlighting a row. Before we go any further, let's first take a look at the JavaScript code.
Javascript:

// Determine browser
var isMinIE5 = (navigator.appVersion.indexOf("5.")) >= 0 ? 1 : 0;
var isDOM = (document.getElementById) ? 1 : 0;
function changeBgcolor(objId,objClass) {
  if (isMinIE5||isDOM) {
    document.getElementById(objId).class Name=objClass;
  } else {
    return;
  }
}

This is just a simple javascript that will change the class name of the id being passed to the function (objId) to the a new class which is also being passed to the function (objClass). These classes are simple background-color declarations in the CSS:

.light {
  background-color: #fff;
}
.dark {
  background-color: #efefef;
}
.rollovercolor {
  background-color:#ccc;
}

So, when looking at the following piece of code: onmouseover="changeBgcolor('#rowid#','rollovercolor'); ", we can determine that when the user mouses over the row, the class name of the id '#rowid#' will change to 'rollovercolor'.

At this point you may be asking, what is this '#rowid#'? In order for this entire set of code to function properly, we need to guarantee that the 'id' for the row (a.k.a. the 'tr') is unique. That is where this '#rowid#' comes into play:

<cfoutput query="EmployeeList">
<cfset rowid = "#EmployeeList.EmployeeID#">

All database tables must have a column that contains a unique identifier, called the primary key (most of the time). In the example above, we're setting the 'rowid' to be equal to the "EmployeeID", which in this case is the unique identifier for the "Employee" table. The reason for putting this value into a variable called "rowid" is so that you don't have to add "#EmployeeList.EmployeeID#" into the row's code 3 different times. It also makes it easier when you want to use this code in another section of your application!

The last thing that we need, is to make sure we set the classes back to what they were originally when the user moves the mouse off the row. So we need to add an "onmouseout" action: onmouseout="changeBgcolor('#rowid#','#IIF(CurrentRow MOD 2, DE('dark'), DE('light'))#');"

There you have it. A way to represent a table of information in a cleaner, easier to navigate fashion.
See alternating rows in action

sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. -- http://www.mikein dustries.com/sifr/

Implementation was relatively simple. Just follow the directions, and your on your way! Learn more and download.