This will be our final product.
We will start out with just our html which will be this.
<td>555 43th Street</td>
<td>4332 Main Street</td>
<td>5345 Bradley Drive</td>
<td>34 Main St.</td>
Alright, there is really only one main thing that I need to point out about this code and that is the class that is declared in the table tag. All this class does is collapse the border of the table so the row is continuous. That class contains the following code.
Alright, now to the reason why you are here. Striped tables! With jQuery doing this is ridiculously simply, I mean so simply its crazy. The code to get the striped table is this and adding the jQuery library of course.
Yup, its that simple. Let me break it down a little.
$("tr:even").addClass("highlight"); will look for all tr elements in a document. It will count, starting at zero, how many tr elements there are and add the highlight class to the even numbered elements. If we look at the table image we see that the zero and second row, or even, rows are have the highlighted class applied to them.
The highlight class
So thats all there is. If you would like all the odd rows to have the class then replace even with odd. There are multiple other things you can find using jQuery to manipulate your web pages. Below are some of the thinks that will help learning more about jQuery.
Well, I hope this tutorial helped you out. Let me know what you thought about it. If you want the files to see how this works a little better leave your email in the comments and I will send you a zip with what you would need