• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Simple jQuery Zebra Stripe Table with Row Hover and Highlight class

Simple jQuery Zebra Stripe Table with Row Hover and Highlight class

Programming April 29, 2010 by Sravan Kumar Kandagatla

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 a 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 an example of how a blank table can be dressed well with simple CSS and jQuery techniques.

The CSS used for this example is as below:

body{
font-family:Arial, Helvetica, sans-serif;
}
table.tablecolors{
border-collapse:collapse;
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;
color:#FFF;
cursor:pointer;
}
table.tablecolors .highlightcolor{
background-color: #8c2800;
color:#FFF;
}

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(){
$(this).addClass("hovcolor");
}, function(){
$(this).removeClass("hovcolor");
});
$("table.tablecolors tr").click(function(){
//$("table.tablecolors tr").removeClass("highlightcolor"); // Remove this line if you dont want to de-highlight the previously highlighted row
$(this).toggleClass("highlightcolor");
});
});

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 a different font or different image background or borders, etc.

In the same way, if you don’t want to highlight the previously selected row once another row is clicked, means like if you want to have only one row selected at a time, then you can uncomment 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 at 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 :)

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • Create Dynamic Charts using CSS and Javascript with Running-Charts
  • Ways to build Style Sheet Switcher for your own web site
  • 26 Best ways to implement AJAX, CSS, and Javascript-based Tabs
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Printing HTML5 in Internet Explorer with IE Print Protector
Next Post: Quickly Create Google Chrome Extension to promote your Blog or Site »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for David OBrienDavid OBrien says

    August 24, 2010 at 3:53 pm

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

  2. Profile picture for Health And Fitness ClassesHealth And Fitness Classes says

    March 23, 2011 at 5:10 am

    i agree with Walter Wimberly

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure