Adding alternately colored rows to your dynamic tables

We've all seen search results tables where the rows are alternately colored, something like this:

1 Blah blah blah blah blah blah blah blah blah blah blah blah blah
2 Yada yada yada yada yada yada yada yada yada yada yada yada yada
3 Blah blah blah blah blah blah blah blah blah blah blah blah blah
4 Yada yada yada yada yada yada yada yada yada yada yada yada yada
5 Blah blah blah blah blah blah blah blah blah blah blah blah blah

But how can we create something similar in UltraDev? The simple answer is that we can't do it directly yet, but it can be done with a little bit a hand coding.

The great beauty of UltraDev is that it works directly on your document, meaning that it's as easy as pie to go in and make changes in the code as we're working. We're going to take advantage of that now by making some basic changes to the Repeat Region code.

First we need to create a basic Repeat Region - I'm sure you're familiar with that by now. I've created a table and entered my data place holders in the usual way

This example is coming from my 'OurSchool' database - one that I'll be using in some of the tutorials from now on. I need to make this a Repeat Region, and I'm going to select 10 records to be displayed.

I click OK, and my row is flagged up as a Repeat Region.

If you were to view the page at this stage, you would see that each record is listed on a standard white background - that's what we'd expect really.

All we need to do now is add a snippet of code at the beginning of our row. The code uses a simple bit of mathematics to work out where the row is odd or even, and then changes the color accordingly.

It really helps if you're familiar with HTML - if you're not, it's easy to learn and you might want to have a look at learning it - it will really help when doing things in UltraDev.

Hit F10 or select Window -> HTML source to open the HTML inspector. You'll see that the server code (ASP in my case) is highlighted in a yellowish color.

This chunk of code is our Repeat Region.

Tip: To make it easy to find items in the code, highlight the item in the Document window first, then when you switch to the HTML inspector your item will be highlighted there also.

In HTML, a row is marked out by a <tr> (table row) tag - and it is closed by a </tr> tag.

We need to insert our code to replace the <tr> tag at the beginning of the Repeat Region.

Here's the code (VBScript) we need to insert:

<%If (Repeat1__numRows Mod 2) Then%>
     <tr bgcolor="#CCCCFF">
<%Else%>
     <tr bgcolor="#FFFFFF">
<%End If%>

The color values can be changed to the colors you wish to use. I have chosen white and a shade of blue.

If you're using JavaScript, rather than VBScript, this is the code you need:

<%if (Repeat1__numRows % 2) {%>
     <tr bgcolor="#CCCCFF">
<%}else{%>
     <tr bgcolor="#FFFFFF">
<%}%>

For those working in ColdFusion:

<tr bgcolor="#IIF(CurrentRow MOD 2, DE("CCCCFF"), DE("FFFFFF"))#">

I'm going to continue in VBScript. If you experience any problems with error messages after inserting this code, then it's suggested that you try copying and pasting the Repeat1_numRows phrase from the code inserted by UltraDev. That usually sorts out any problems.

You can see where I've inserted the code - I've put a box around it to make it stand out in the picture. That's all that needs to be done.

If I preview my page in the browser, it looks like this

That's all there is to it. My thanks are extended to Julian Roberts, who initially introduced me to this technique, and to Mike Barbarelli from Macromedia Technical Support, who found this method of alternating colors whilst still keeping all elements editable in UltraDev. Also to Tom Muck and others for posting the JavaScript version to the UltraDev newsgroup. The ColdFusion code was supplied by Uncle Massimo. Thanks guys.