May 2011

Recently while I was doing some research for a new web application I was looking for a simple and clean, almost zen-like way to create alternating rows of color in a table. Interestingly this problem was not connected with the website I was creating.

As I was scouring the web I came across a multitude solutions, that while they may work, were just way too complex for my taste. I read a quote in a signature on a forum a while back that said “Code is poetry.” With the exception of regular expressions, that is what I try to do with my code – but I try to take it one step further and try to achieve what might be the haiku equivalent in code (simple, direct and can be understood by even novices to the art.)

All the while in the back of my head MOD kept circulating, so to refresh my memory, I did some research on it. All I could find was something to the effect of “MOD returns the whole the remainder after a division.”   Hmmm, not specific enough. So I set up a spreadsheet, ran a bunch of mod calculations, and immediately saw something interesting – repeating patterns! I knew I found the answer to my alternating row problem.

Let’s start with some basics of math:

1. Anything divided by zero is undefined (there isn’t any answer)
2. Zero divided by anything is, well, zero
3. Anything divided by 1 is that number

A couple of basics about MOD:

1. 0 MOD anything is zero (see #2 above)
2. Anything MOD 1 is zero (e.g. 12 divided by 1 is 12 with zero left over, 123 divide by 1 is 123 with zero remaining)

So, what does MOD do exactly? In grade school when learning to do division at first we never got into decimals (.1, .14159256, etc) in the division process. So, if we divided 12 by 7 the results were 1 with a remainder of 5. MOD returns the remainder, which in this case is 5. That’s it. That’s all that MOD does.

How did this solve my dilemma? Well, after seeing the patterns in my spreadsheet, I realized the pattern generated by MOD could be used by telling me which line to color for the table row. I was using PHP and MySQL for the project, but the solution as is could be used for ASP, JSP, Java, C, C++ or any other language just by changing the syntax. Here is the pattern for a simple 2 color alternating row:

• Row 1 MOD 2 (since I was looking to do just 2 alternating rows) is 1
• Row 2 MOD 2 is 0
• Row 3 MOD 2 is 1
• Row 4 MOD 2 is 0
• Row 5 MOD 2 is 1, etc

The results of MOD 2 is binary (meaning only 2 numbers, or if you like states). It is either one or the other.

So, xMODy has y possible numbers, or states, ranging from 0 to y-1 ocurring in a repetitive patern. For example: xMOD7 has 7 possible numbers ranging from 0 to 7-1=>6 (e.g. 0, 1, 2, 3, 4, 5, 6, 0, 1, 2…)

This translated into – if “Row number MOD 2 is 0 set the table row color to color 1 else set it to color 2.” Which is the solution I was looking for.

Now to translate it into some thing more significant: (like an outline for a coding language)

Set a counter to 1 //FOR THE FIRST ROW

Start your loop

if the counter MOD 2 equals 0 do something else do something else

increment counter

End the loop

That is the logic behind how I solved my problem. For example if I wanted to alternate white and pink as background rows in a database driven table, the syntax of PHP it would look something like this:

<table>

<?php

$tr_alt_background = "style=\\"background-color:pink;\\""; //DEFINES THE CSS STYLE FOR THE OFF COLOR BACKGROUND

$alt_row = 1; // COUNTER

do { ?>

<tr <?php if ($alt_row%2 != 0) {echo $tr_alt_background;} $alt_row++; ?> height="35px"> //HERE IS WHERE THE MOD COMES IN

<td width="147" colspan="2" style="padding-left:30px; font-size:16px; font-weight:bold; width:350px">

<?php if ($row_From_Table[\'table_column_1\'] == 1) {echo "<img src=\\"images/active.png\\" />";}

else {echo "<img src=\\"images/not-active.png\\" />";} ?>&nbsp;&nbsp;<?php echo $row_From_Table[\'table_column_2\']; ?>

</td>

</tr>

<?php } while ($row_SUbDomain_List = mysql_fetch_assoc($SUbDomain_List)); ?>

That was my solution, it is not as tidy as I would like, but it is easy enough to figure out how it works if I hadn’t explained it.  Note that in PHP MOD is represented by the % sign.

Now if you wanted to get even fancier, say alternate blue and pink rows with a dark border every 4th row you could define the styles in an array and call the style by using the value returned by the MOD function. Since the divisor also tells us how many states we can have we will need 4 definitions, some of which could actually be empty. So it could look something like this:

$divisor = 4; // SETS THE COUNTER LIMIT - IS EQUAL TO THE NUMBER OF CHANGES POSSIBLE

$alt_row = 0;  // IN THIS EXAMPLE WE MUST START WITH ZERO BECAUSE MOD'S SMALLEST VALUE IS ZERO

$alt_array[0]="style=\\"background-color: blue;\\"";

$alt_array[1]="style=\\"background-color: pink;\\"";

$alt_array[2]=$alt_array[0];  //SINCE THIS STYLE IS ALREADY DEFINED NO NEED TO RETYPE IT ALL AGAIN

$alt_array[3]="style=\\"background-color: pink; border-bottom: 3px solid black;\\"";  // THIS LINE HAS THE CSS DEFINITION FOR THE BLACK BOTTOM BORDER

<table>...<LOOP>

<tr <?php echo $alt_array[$alt_row]; $alt_row++;  ?> >...<tr>

…if ($alt_row == $divisor) {$alt_row = 0;} // RIGHT BEFORE THE END OF THE LOOP TAG

</LOOP>...</table>

Aside from defining the styles this method uses only 3 short lines of code to create a table of alternating color with a dark separator every fourth row. In PHP the end of a line is indicated by a semi-colon, so, defining the variable $alt_row is one, echo $alt_array[$alt_row] is 2 and incrementing $alt_row ($alt_row++) is 3. Very, very haiku.

This same code can be used for any HTML tag that is going to be repeated in a database driven loop. You could even use it to set the class tags by defining the classes in your CSS and then defining $alt_array[x] = “class=\\”stylex\\”";.