February 18, 2005

Presentation of table with alternate row background colors (works with Java, .NET, Ruby, everything else too)

Yesterday my team member asked me (after spending 2hrs) for logic for presentation of table with alternate row background colors. I felt that it may be simple to people who know it and difficult to others, hence I am blogging about the solution.

This solution works with Java, .NET, Ruby, every other language. I’ll use HTML example for simplicity and focus on solution rather than technology syntax.

First, declare two style classes (or something you need to set the font/background/etc that needs to be altered):

<style>

.rowstyle1 {background-color:white;}

.rowstyle0 {background-color:lightyellow;}

</style>

Second, declare a numeric (int) variable to count (running number of) the table rows:

int rowNumber = 0;

Third, increment the running number before rendering the table row:

rowNumber++;

Fourth, use the running number to assign the style class to each row:

class='rowstyle<%=(rowNumber % 2)%>'

Post me if you need help with logic building in any situation. I’ll try to help.