Simple jQuery Zebra Stripe Table with Row Hover and Highlight class

Was just trying to build a fully functional table or grid by using jQuery. I see there are many tutorials with Zebra Stripe Tables by using  jQuery. Here I am trying to make Simple jQuery Zebra Stripe Table with Row Hover Class and Row Highlight Class or Row Selected Class.

Simple jQuery Zebra Stripe Table with Row Hover and Highlight class
Simple jQuery Zebra Stripe Table with Row Hover and Highlight class

Here is the example on how a blank table can be dressed well with simple CSS and jQuery techniques.

The CSS used for this example is as below:

font-family:Arial, Helvetica, sans-serif;
width: 728px;
border: 2px solid #940103;
table.tablecolors td{
padding: 8px 6px;
font-size: 12px;
border: 1px solid #FFF;
table.tablecolors .even{
background-color: #efefef;
table.tablecolors .odd{
background-color: #FFF;
table.tablecolors .hovcolor{
background-color: #4f8c00;
table.tablecolors .highlightcolor{
background-color: #8c2800;

The simple jQuery script or code snippet:

$(document).ready(function() {
$("table.tablecolors tr:even").addClass("even");
$("table.tablecolors tr:odd").addClass("odd"); //This is not required - you can avoid this if you have a table background
$("table.tablecolors tr").hover(function(){
}, function(){
$("table.tablecolors tr").click(function(){
//$("table.tablecolors tr").removeClass("highlightcolor"); // Remove this line if you dont want to de-highlight the previously highlighted row

If you see the above script, you can avoid either “even” or “odd” class and its jQuery declaration if you place a table background color – but it is required when you want to have different font or different image background or borders etc.

In the same way if you don’t want to highlight the previous selected row once the another row is clicked, means like if you want to have only one row selected at a time, then you can un-comment the following line – if not leave it as is.

$("table.tablecolors tr").removeClass("highlightcolor");

And I don’t think there is any other simple method to achieve this via jQuery? – if so please share the code.

Check the final example and let me know if you are looking out for any further enhancements to be done to the table and its functionality. I can give  you one suggestion which I have in mind – like having a header and footer for the tables by using jQuery?

If you have any suggestions to improve please drop me a message – I will look into it.

BTW – This is my first attempt on jQuery tutorials in my WittySparks site – so please welcome me to the jQuery Tutorials world and encourage me to come up with more jQuery scripting or coding with examples or tips :)

Published by Sravan Kumar

A Creative Web Designer, Developer, User Interface and User Experience Expert.

Join the Conversation


  1. What if you wanted to unhighlight the selected row if it is already highlighted when you clicked on it again?

  2. I’ve used almost the exact same method when I was developing a survey to see how effective striping vs. highlighting is for large on-line data sets.

    If you or anyone else wants to see on-line survey you can participate in if you are interested:

    I will be posting results when the survey closes.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Thank you for sharing the article across social media. You can follow us in these paltforms to receive latest updates from WittySparks.

Send this to a friend