Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

jQuery: Zebra striped table

jquery

  • Please log in to reply
13 replies to this topic

#1 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 24 February 2009 - 03:16 AM

G'day everyone. Welcome two my second tutorial on jQuery, this one is a follow up from the other one. The first tutorial was based around learning all
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;
Posted Image

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.
Posted Image

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;
Posted Image

+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.

  • 3
I've returned...

#2 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 24 February 2009 - 08:51 AM

Nice job. Any reason why you didn't include a screenshot of the final result? +rep
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#3 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 24 February 2009 - 01:15 PM

Aww poo. Sorry, I took a screenshot but forgot to upload. I am going to add it now.
  • 0
I've returned...

#4 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 25 February 2009 - 05:05 AM

Nice job Brandon! +rep.
BTW, I moved all of your tutorials to the JavaScript sub-forum.
  • 0

#5 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 25 February 2009 - 01:18 PM

Thanks Jordan. OK thanks, I will post them in Javascript from now on.
  • 0
I've returned...

#6 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 25 February 2009 - 11:36 PM

Very nice! Thorough and detailed.
  • 0

#7 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 26 February 2009 - 03:34 AM

nice job, ill rep when i get the chance
i like jquery
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#8 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 04:11 AM

Thanks John and Amro. Mean a lot from great people like yourselves.
  • 0
I've returned...

#9 mendim.

mendim.

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 741 posts

Posted 26 February 2009 - 04:43 AM

Nice tutorial .. I can't +rep now .. but i will :$
  • 0

#10 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 04:54 AM

Thanks mendim. It must be shared around, I haven't seen you write any tutorials?
  • 0
I've returned...

#11 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1155 posts

Posted 26 February 2009 - 05:02 AM

CooL .. +rep when it lets me too ..
  • 0

#12 Brandon W

Brandon W

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2092 posts
  • Location:Ipswich, Australia
  • Programming Language:C, Java
  • Learning:Java, C++, JavaScript

Posted 26 February 2009 - 05:24 AM

Thanks Egz. Do you know any JS?
  • 0
I've returned...





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download