Apply Different Colors On Alternate Table Rows Using Jquery

In this tutorial I will show you how to apply two different colors on alternate rows of HTML table using JQuery. So let's start and create a simple table

<table border="1">
           
                <tr><td>John Doe</td></tr>
                <tr><td>Steve Waugh</td></tr>
                <tr><td>Wasim Akram</td></tr>
                <tr><td>Ricky Ponting</td></tr>
                <tr><td>Shahid Afridi</td></tr>          

        </table>

Now in ready function of JQuery we have to write like this:

Method 1:-

$(document).ready(function () {

            $("tr:even").css("background-color", "#ececec");  // silver grey color
            $("tr:odd").css("background-color", "#ffffff");  // white color

        });

or you can make a CSS class and then use addClass() function of JQuery

Method 2:-

$(document).ready(function () {

            $("tr:even").addClass('hor-minimalist-c');
            $("tr:odd").addClass('hor-minimalist-d');

        });

Hope you understand. Have a good day.