Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
This is the third sequence of my jQuery tutorials. The first one was all the selectors, the second was making a table stripey, now this one will be
using events such as onclick, onkeyup etc. in jQuery. I said in my previous tutorial I would be showing you how to sort data easily in jQuery, but I
decided to change my mind. The next tutorial will show you one of the ways you can sort the table data, using AJAX and MySQL. The one after that, it
will be even MORE simple! We will be using a jQuery plugin.
As I mentioned in the previous tutorials, you must have the jQuery.js file. This can be found in the first tutorial. Another thing you might need for
this tutorial will be the previous source code from tutorial 2. If you have been following you might have created your own code, but here is mine if
you didn't;
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Zebra Stripes</title>
<style type="text/css">
thead tr th {
background-color: #93008E;
}
tr {
background-color: #FFADFC;
}
tr.alt td {
background-color: white;
}
tr.over td, tr:hover td {
background-color: #93008E;
}
</style>
<script src="jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".zebra tr:even").addClass("alt");
});
</script>
</head>
<body>
<table width = "650" class = "zebra">
<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>
</body>
</html>
What we will be doing in this tutorial, is adding a onhover effect to the elements with the class "over". As you can see there is no elements, but
if you read the previous tutorial, I highly suggest you do, you will understand why there isn't an element, yet, with the class over. Also the hover
effect already works because we added it the CSS, but what about the browsers that don't support :hover *cough*IE*cough*? jQuery can do this too.
So let's get started;
Here is some new jQuery code you must insert;
$(".zebra tr").mouseover(function() {
$(this).addClass("over");
});
This must still fall into the function that checks when the DOM is ready, so the new code looks like this;
$(document).ready(function() {
$(".zebra tr").mouseover(function() {
$(this).addClass("over");
});
$(".zebra tr:even").addClass("alt");
});
Now comes the explanation. The beginning part of this new code selects all the elements with the class zebra (only our table) then every tr elementinside that class. Once they are all selected when add a new funtion, mouseover. This will mean when the element is hovered over the function after
will be ran. In our case. It will run;
$(this).addClass("over");
The selector "this" will select the element last time an element was selected so it will select our table's tr elements. Then it will add the class"over" to that element. In summary, the class "over" will be added to the tables tr elements when they are hovered over.
Now we need to add a new event which will remove the class when the mouse is left. This is basically the same as above, but we will remove the class.
$(".zebra tr").mouseout(function() {
$($this).removeClass("over")
});
All this code can be cut down to very few lines. But that is more advanced, probably the hardest jQuery gets, so I will show you in another tutorial.
If you would like to see how to do it, you can just Google "jQuery chains".
Hope you enjoyed the tutorial. Tutorial one and two can be found in my signature.
Good luck ;)
+rep if you liked.
Regards,
Brandon
Back to top
