Zebra stripes with jQuery

The following snippet describes how you can add ‘Zebra Stripes’ to your tables with JavaScript and jQuery.

The colours could be applied with CSS classes in stead, which would also work in browsers with JavaScript disabled, but the interesting part here is the hover effect, which is not possible without JavaScript

Html:

Linie1


Linie2


Linie3


Linie4


Linie5

Add the following JavaScript code, together with the jQuery class:

$(document).ready(function() {
    $(".zebrastripe tr:even").css("background-color","gray").hover(
      function() {
        $(this).css("background-color","yellow");
      }, function() {
        $(this).css("background-color","gray");
      });
    $(".zebrastripe tr:odd").css("background-color","blue").hover(
      function() {
        $(this).css("background-color","yellow");
      }, function() {
        $(this).css("background-color","blue");
      });
  });

Tags: Snippets