How to Create a Table Row Highlighter Using jQuery
This tutorial will show you how to jazz up your table’s rows by animating their background image when someone roles over them.
Example
Download
Getting Started
The first thing we need to do is download some things. First on your shopping list is jQuery. If you don’t have it already you can visit jQuery’s website and pick it up for the low low price of free. Second we need a jQuery Plugin that will allow us to animate the background position of an element. You can pick this up at jQuery’s Plugins Website. Once you have both, then you are good to go.
Create Your Table
If we are going to turn a mundane table into a totally awesome table, first we need a mundane table.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <html> <head> <!-- Import jQuery and the Background Position Plugin --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script src="jquery.backgroundPosition.js" type="text/javascript" charset="utf-8"></script> <!-- Some Styles to make the table look pretty Nothing Special Here. --> <style type="text/css" media="screen"> td{ border-bottom:1px solid #eee; padding:10px; } th{ background-color:#333; color:white; padding:15px 30px 15px 10px; font-weight:bold; } body{ font-family: Arial, "MS Trebuchet", sans-serif; } table{ border:1px solid #bbb } </style> </head> <body> <!-- You will need to seperate your header and body with the <thead> and <tbody> tag for easier selecting later --> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> </table> </body> </html> |
This gives us a table to work with. You’ll noticed I used the thead tag and the tbody tag. This is so we can have and easier time later selecting only the main rows of the table and not the header.
Background Image and CSS
We will be animating the background image’s position of each row to get our effect. We need to first give each row a background image. For this example I just used an image that is a gradient from left to right 770px wide. You can experiment with your image and get some cool effects.
1 2 3 | tbody tr{ background: #fff url('bg-select.jpg') no-repeat scroll 200% 0px; } |
The initial position of the background image is off of the table so we can slide it in for a nice animation. Now that we see the CSS, it becomes more clear why we used the tbody tag. If we just referenced the tr tag by itself, the header row would get the same treatment as all the others.
Adding the jQuery
Now that everything is setup and in place we can add interactivity to the table. What we are going to do is make it so when the user rolls over a table row, shift the background position over into site.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script type="text/javascript" charset="utf-8"> //Make sure the document is ready to handle everything. $(document).ready(function() { $('tbody tr') //Unfortunately with this jQuery plugin it's a little broken in //FF2. It requires to have their styles inline. So we will just do //it via jQuery .css({backgroundPosition: '200% 0px'}) //The hover event handles when the mouse is over and off an element. //Usage: $('selector').hover(over function, off function); .hover(function(){ //Use jQuery's animate function to animate your background postion. //The second argument (700) is for how long you want it to take to animate. $(this).animate({backgroundPosition: '(0% 0px)'},700) }, function(){ //Animate it back to original spot. $(this).animate({backgroundPosition: '(200% 0px)'},700) }); }); </script> |
That’s all there is to it. Just put it all together and your good to go. Here is the whole code all assembled.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script src="jquery.backgroundPosition.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> tbody tr{ background: #fff url('bg-select.jpg') no-repeat scroll 200% 0px; } td{ border-bottom:1px solid #eee; padding:10px; } th{ background-color:#333; color:white; padding:15px 30px 15px 10px; font-weight:bold; } body{ font-family: Arial, "MS Trebuchet", sans-serif; } table{ border:1px solid #bbb } </style> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('tbody tr') .css({backgroundPosition: '200% 0px'}) .hover(function(){ $(this).animate({backgroundPosition: '(0% 0px)'},700) }, function(){ $(this).animate({backgroundPosition: '(200% 0px)'}) }); }); </script> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </tbody> </table> </body> </html> |
Yeah, or you could stop wasting your time on jQuery, and do it the natural way. It’s amazing how much space people spend talking about how easy jQuery makes things, when the alternative is so much easier, shorter, more maintainable and portable.
tr.zebraRow td { background-color: #ddd; }
function ZebrafyTable(Table) {
if (typeof(Table) == ’string’) { return ZebrafyTable(document.getElementById(Table)); }
Rows = Table.getElementsByTagName(’tr’);
var i; var iC = Rows.length; var On = false;
for (i=0; i<iC; ++i) {
if (On) { Rows[i].className = 'zebraRow'; }
On = !On;
}
}
But this tutorial has nothing to do with zebra stripping. This is about creating a cool enhancement for your tables. With this you could have something like flames coming out from the side (as cheesy as it might be) or really anything that animates from one side to the next. I think you missed the point of why this is cool. Plus I wouldn’t use JavaScript for zebra stripping, if it’s a table that really needs it and JavaScript is shut off, they’re in a bit of a pickle.
Hello, thanks for the tutorial. Just a note, you should use .stop() to avoid animations from queueing up.
Thanks for the tip.