One of the reasons I love technology is that it is designed to make life easier!  As the webmaster at Lake Center Bible Church, one of the things I do every week is upload the sermon to our website and to iTunes.  On our sermons page, we have a simple table that contains the sermon that is preached each week – pretty typical for any church.  I have the table set up to have alternating colors for the rows to make the content easier to see.  It looks like this:

Each row has a CSS class with the background color set as gray or blue.  Every week, when I upload the new sermon, I have to select the table row and then select the appropriate class.  Not a big deal, but it’s a few clicks / keystrokes.

Since I am learning javascript and jQuery, I decided to let it do the work for me instead!  By adding these lines of code I wrote, jQuery automatically colors the table for me:

<script>
$("document").ready(function(){
$("tr:odd").css("background-color", "#E5E5E5");
$("tr:even:gt(0)").css("background-color", "#c7d4e5");
});
</script>

All this is doing is taking every odd row and giving it the background color of gray (#E5E5E5).  It is then taking every even row that is greater than (gt) the index of 0 – everything past the first row, and coloring the background blue (#C7D4E5″).

Now, my table looks like this in Dreamweaver with all the classes stripped out:

And jQuery is coloring it in for me!  A VERY simple fix but anything that saves me time on something I do repeatedly is worth the effort.  Hope this helps someone!