Introduction
Table Highlight Using CSS and jQuery: Part 1
Table Highlight Using CSS and jQuery: Part 2
In Part 2 of this article series we created a column and cell highlighting effect. In this article we are creating an even and odd table row highlighting feature. I assume that the reader has a basic understanding of HTML, CSS3 and jQuery. If you are not familiar with jQuery then check the links provided at the end of this article. In this part we will create an even and odd row highlighter for a HTML table.
Preparing the workspace
Before we proceed, let's first set up our base.
- Create a new text file and paste the following code into it.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css"rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset="utf-8" />
<title>Table Highlight by Arpit</title>
<style>
/* we will use this section for adding css classes or any styling */
</style>
</head>
<body>
<!-- HTML will go here -->
<script>
$(document).ready(function () {
// We will use this for adding our jQuery or scripts
});
</script>
</body>
</html>
- Save this file as a HTML file. This file will be modified later in this article.
Even Row Highlighting
This effect will highlight the even rows of the table when the user hovers the cursor on the table. This effect is very much similar to a single-row highlighter except it highlights multiple even rows and requires jQuery.
To create a sample table, copy the following HTML and paste it into our newly created HTML file's HTML section.
<table id="tbl" border="1">
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
</table>
The code above will create a simple 6X3 empty table. To give it some dimensions add the following styling in the CSS section of our HTML file.
-
td[class*=col]{
width:100px;
height:20px;
}
In the code above the line td[class*=col] is responsible for selecting all the td (cells) using a * wild card. It will select all "td" tags with a class of col1, col2, col3 and so on. The width and height of each cell is set to 100px and 20px respectively.
Now to select and animate all even rows, we have a very special jQuery selector "$("tr:even")". This selector selects all the even rows of the table. To highlight all these rows we can use the animate function. To do this , check the following code snippet.
$("#tbl").mouseenter(function(){
$("tr:even").animate({
backgroundColor:"#ffaa44"
});
});
$("#tbl").mouseleave(function(){
$("tr:even").animate({
backgroundColor:"#ffffff"
});
});
The MouseEnter event highlights the even rows. This event occurs when the mouse enters a table.
The Mouseleave event remove the highlight from all rows. This event is fired when the mouse leaves the table bounds.
![]()
Odd Row Highlighting
Now this is quite similar to what we have done in the even-row highlighting effect. The only difference is that this time we are selecting only odd rows. To select odd rows we need to use the selector "$("tr:odd")". It selects the odd rows and then we can use the animate function to highlight the selected rows. Check the following code snippet for achieving this effect.
$("#tbl").mouseenter(function(){
$("tr:odd").animate({
backgroundColor:"#aaff44"
});
});
$("#tbl").mouseleave(function(){
$("tr:odd").animate({
backgroundColor:"#ffffff"
});
});
The code is self-explanatory if you are familiar with jQuery syntax and events. MouseEnter events use the animate function for changing the color and the mouseleave event is used for resetting the row color.
The preceding two effects can be merged to form a new table effect with alternate table row colors.
![]()
Useful Links
Live Demo
Summary
That's all for this series. We have covered most of the common table highlighting effects in this 3-part series. These effects can be combined with each other to generate new effects. So start experimenting, but don't forget to comment and share.