contrastRows(tableClass='altRows',oddClass='odd',evenClass='even')

contrastRows('contrast','teal','olive')

The name of this newly developed javascript is contrastRows() which was written because there were quirks in every other javascript I tried to use to render alternating table row styles. The contrastRows() function addresses almost every one of these issues. One item that is noticably missing is the feature of being able to have more than two row color options. I consider this a minor issue and won't lose a moments sleep over this one discrepancey.

So, how does it work? Quite well, thank you! Well, alright, I'll scrap the smart comments and give an overview of what it does and how to implement the code. Unlike some other scripts that rely on an element id this script looks for table elements that possess a specific target class. Using this method eliminates the need for each table to have an id attribute and also circumvents a getElementsById() bug in IE and Opera which appears to finally be fixed in IE7. The code then gathers up a list of table rows for each target table. As the code examines each table row it only looks for table data cells. This is an intended design criteria because I don't want table header cells included in the element selection process. As table data cells are found they have the appropriate class added to provide our custom styling. The contrasting row style only toggles when a table row containing table data cells is encountered. This functionality allows table header cells to be interdispersed with table data cells indiscriminantly. The example above is a prime example of this logic in action.

The contrastRows() function can be used to style all tables on a rendered page by issuing a Javascript function call at the bottom of the page. It can also be used to selectively apply separate styles to individual tables by adding a Javascript function call immediately below each block of table markup. Only tables which contain a target tableClass within a tables open tag will be parsed.

One item worth mentioning here is that although this example code might appear as though color names can be sent, only class names are recognized. I have named the select box options to match the corresponding background colors for demonstration purposes only. I also include default .odd and .even classes in virtually all of my stylesheets which are very conveniently used by the contrastRows() function.

You will also notice that I have managed to cram a lot of functionality into a very small amount of code. I do this in distinct contrast to how other programmers write lines and lines of code that have very little actual functionality.