Alternate Table Rows Color using jQuery or CSS

This jQuery tutorial helps to create alternate table rows color using jQuery. I will let you know both ways to set alternate row color on the table using CSS and jQuery.

The Alternate row’s color will help to increase the readability of table data. You can also use alternate row colors to highlight some table rows data in a table to get the reader’s attention.

You can also achieve the same thing using CSS as well. We will cover the following topics in this tutorial:

• Alternate rows color using jQuery
• How to alternate row color using CSS

Checkout Other tutorials:

• ng2 datepicker with example Using Angular 13
• Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
• How to Refresh Page Using JavaScript & jQuery
• Add Datepicker to Input Field using jQuery UI

Alternate rows Color Using jQuery

jQuery is a very power full library for web development, we just use jQuery css() class method $("tr:even").css to alternate table row color.

We require the latest jQuery library files for alternate row color of table. We will use :even and :odd jQuery filters for selecting odd or even index of the table rows.

How To Style Alternate row color with jQuery

Step 1: Include the jQuery library in head the section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Step 2: We will create a HTML table in index.html file.

<table border="1" class="table table-bordered">
   <tbody>
      <tr>
         <th>Name</th>
         <th>age</th>
      </tr>
      <tr>
         <td>Mike</td>
         <td>40</td>
      </tr>
      <tr>
         <td>Adam</td>
         <td>50</td>
      </tr>
      <tr>
         <td>Baldwin</td>
         <td>34</td>
      </tr>
      <tr>
         <td>Miller</td>
         <td>40</td>
      </tr>
   </tbody>
</table>

Step 3: We will write some jQuery code, We need to include below jQuery code in the footer of index.html file for alternate row colors on the table.

<script>
$(document).ready(function()
{
  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");
});
</script>

As you can see above code, I have used jQuery "css" method and odd and even filters of jQuery. These filters change the background color of table rows.

How to Style Alternate Table Rows Color Using CSS

The best way to alternate table row colors is to use the CSS :nth-child selector. You can simply add a zebra striping to your table by adding the following CSS code to your stylesheet.

The :nth-child() selector in CSS is used to match the elements based on their position in a group of siblings.

Syntax:  

:nth-child(n) {
    // CSS Property
}

Where n is the argument that represents the pattern for matching elements. It can be odd, even or in a functional notation.

Supported Browser:

• Google Chrome 4.0
• Internet Explorer 9.0
• Firefox 3.5
• Opera 9.6
• Safari 3.2

You can use the below css code into head the section of index.html file.

<style>
tr:nth-child(even) {
background-color: #f8f8f8;
}
tr:nth-child(odd) {
background-color: #EFF1F1;
}
</style>

I have used pseudo(:nth-child) css class for alternate row color.

You can download source code and Demo from below link.