• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WittySparks

Ignite Your Thoughts

  • Topics
    • Technology
    • Business
    • Marketing
    • Education
    • Healthcare
    • Travel & Tourism
    • Entertainment
    • Guides
    • Tutorials
  • Reviews
  • Newsletter
  • Contact Us

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 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 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 :)

Related Articles

  • Create Dynamic Charts using CSS and Javascript with Running-Charts
  • Ways to build Style Sheet Switcher for your own web site
  • Upgradation to Angular 7: Summary and Features

April 29, 2010 by Sravan Kumar Kandagatla Tagged With: css, Javascript

Previous Post: « Printing HTML5 in Internet Explorer with IE Print Protector
Next Post: Quickly Create Google Chrome Extension to promote your Blog or Site »

Primary Sidebar

Search

Recently Published

  • Most Effective 2021 Marketing Tactics for MLM Business
  • 9 ways to deal with the pressure of college and part-time work
  • Yoga for Constipation: Channelising the Power of Asanas
  • 20 Actionable Email Marketing Tips To Boost Your Results
  • Art Print makes Your Life Colourful

Random Reads

Two Businesses that will always have a market

If you’re not into anything particular, but know for sure you have an entrepreneur inside you it’s good to have a sure shot market for your pursuit. Here are two businesses that will always have a market.

Personalized Precision Medicine New Genomic Technology

Personalised Medicine: Health Innovation’s Improving Outcomes

Personalised medicine, also known as precision medicine, is a scientific procedure that is used to distinguish one individual from another, as well as to know to what extent they are prone to diseases.

Blogging for students

Benefits of blogging for your students

If your student is thinking of starting a blog, you need to encourage them as much as possible – here are some reasons why.

Fresh readymade forms for your website by Formee

I am sure there are many web developers who put a lot of effort to build simple HTML forms with browser compatible CSS for their own website or any other web application. And as you are aware it takes a hell of a time to create or build such compliant web standard HTML forms. If […]

Footer

Search

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