How to Add Zebra Striping to a Table with jQuery


You are showing a table of records on a webpage and you want to highlight its alternate rows using JQuery.

First step is to add a simple css class for highlighting background color of table alter rows.

<style type="text/css">
   .odd {background: #caf2fe;}
</style>

Second step is to add a typical JQuery ready function in which you need to add a single line of JQuery selector along with addClass function.

<script type="text/javascript">
   $(document).ready(function(){
      $("tr:odd").addClass("odd");
   });
</script>

 

 

About author


User avatar

Waqas Anwar

Founder of EzzyLearning.com, Senior Consultant, Microsoft .NET and Web Technologies

Add Comment