Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
the selectors that jQuery has to offer, but in this tutorial we will be using some of those selectors to style a table and add zebra stripes to it.
Most would think, isn't CSS3 implementing this new feature anyway? To answer that yes it is. Then why are we using jQuery? We are using jQuery because
it's so very simple to do something like this, and we all know how slow IE can be to implement these new CSS features ;)
I will not be explaining any of the HTML in this tutorial, some CSS I will make exceptions. But most of the CSS explanations will be in comments. I
will explain ALL the jQuery, considering this is what it's based on.
Enough chit chat, let's get started.
So I have gone ahead and created a simple table of some CC members. I got all of them from the order of post count ;) You can use whatever information
your heard desires, but this was the easiest for me. Also, if you do decide to create your own. Keep it, the next tutorial will be based on sorting
this data the quick way :)
Here is the code for my table;
<table width = "650"> <thead> <tr> <th> Name </th> <th> Rank </th> <th> Post Count </th> <th> Avatar Rating </th> </tr> </thead> <tbody> <tr> <td> Jordan </td> <td> Administrator </td> <td> 12,447 </td> <td> 8 </td> </tr> <tr> <td> Xav </td> <td> Code Slinger </td> <td> 12,146 </td> <td> 7 </td> </tr> <tr> <td> TcM </td> <td> Code Warrior </td> <td> 8,450 </td> <td> 9 </td> </tr> <tr> <td> WingedPanther </td> <td> Super Moderator </td> <td> 5,079 </td> <td> 7 </td> </tr> <tr> <td> chili5 </td> <td> Code Warrior </td> <td> 4,431 </td> <td> 9 </td> </tr> <tr> <td> marwex89 </td> <td> Guru </td> <td> 3,995 </td> <td> 6 </td> </tr> <tr> <td> John </td> <td> Co-Administrator </td> <td> 3,762 </td> <td> 10 </td> </tr> <tr> <td> Egz0N </td> <td> Guru </td> <td> 3,674 </td> <td> 9 </td> </tr> <tr> <td> amrosama </td> <td> Code Warrior </td> <td> 3,283 </td> <td> 7 </td> </tr> <tr> <td> v0id </td> <td> Retired </td> <td> 2,697 </td> <td> 5 </td> </tr> <tr> <td> MathXpert </td> <td> Guru </td> <td> 2,263 </td> <td> 8 </td> </tr> <tr> <td> mendim. </td> <td> Guru </td> <td> 2,032 </td> <td> 8 </td> </tr> <tr> <td> Brandon W </td> <td> Guru </td> <td> 2,004 </td> <td> 10 </td> </tr> <tr> <td> MikeM </td> <td> Guru </td> <td> 1,494 </td> <td> 10 </td> </tr> </tbody> </table>
NOTE: If you do create your own information, make sure you create the thead and tbody tags. And in the thead section make sure you use the th tags.
This can all be seen in my example. The table looks like this;
As you can see this is quite boring. But we will improve that in the next section.
Now that we have our basic table, we have to add some "style" to it. Let's create two classes, both of them for our table rows. I am going to
call mine "over" and "alt". DO NOT go through the table and add those two classes to every table row! jQuery will make it very easy for us :) Let's
also give our table a class, I named mine zebra.
Now let's add some shnazzy CSS to the classes we created. You won't quite understand what they will do yet, so you can just copy mine now and after
you can come back and change it to the way you like it. Since I know the outcome, I am going to make my table purple :)
thead tr th {
background-color: #93008E;
}
tr {
background-color: #FFADFC;
}
tr.alt td {
background-color: white;
}
tr.over td, tr:hover td {
background-color: #A1009B;
}
As you can see, if you used my code, we have a little hover effect going now which is great! We also have a good looking table, I love purple hehe.
If you think this is a zebra yet, it looks colourful, but it's still not stripey :( jQuery will fix that :)
So let's get started with the jQuery. Before we can use it, we must include the jQuery.js file into out page (link found in previous tutorial, link
at bottom).
<script src="jQuery.js" type="text/javascript"></script>
Now it's included we can now start to use the power of it. Here is the first line of code we will be using.
$(document).ready(function() {
});
This code you will see many times during jQuery. What this does is, the $ stands for jQuery. Then we use a selector that will select the document.And when it is ready it will fun the function that is enclosed between the {}. So in basic, all this is saying is when the DOM (document) is ready
do the code in the function. Which we will now add some code too it :)
$(document).ready(function() {
$(".zebra tr").addClass("alt");
});
This means; when the DOM has finished loading, use a selector to select all the elements with the class of zebra (the table) and all the tr elements
inside that element with the class of zebra. This will select all the table row elements in our table. Now we want to do something to that selector.
We will use a predefined class named addClass() which will then go through and add;
class = "alt"To every element it had selected. But this doesn't solve our problem of making it striped, we must choose every second table row to stripe. How can
we do this? If you read through the previous tutorial, we only have to add a filter to the tr element in the jQuery selection process.
$(document).ready(function() {
$(".zebra tr:even").addClass("alt");
});
Now in just three lines of jQuery we have a stripped table! As you have noticed, in the CSS there is a class mentioned, over. This will also be
used in the next tutorial ;)
Hope you enjoy playing around with your newly created striped table. Have fun :)
Final result;
+rep if you liked.
Regards,
Brandon
Tutorial 1 can be found here;
Tutorials - CodeCall Programming Forum
Edited by Brandon W, 24 February 2009 - 01:18 PM.
Back to top
