Dynamically Change Alternate row colors using jQuery

Dynamically Change Alternate row colors using jQuery

Today, We want to share with you Dynamically Change Alternate row colors using jQuery.
In this post we will show you Dynamically Change Alternate row colors using jQuery, hear for Dynamically Change Alternate row colors using jQuery we will give you demo and example for implement.
In this post, we will learn about Dynamically Change Alternate row colors using jQuery with an example.

The Simple :odd selector selects each (odd type) element with an odd index number (like: 1, 3, 5, etc.).

The Simple :even selector selects each (even type) element with an even index number (like: 2,4,6, etc.).

Also Read :  How to get current Date and Time using JavaScript

0-based indexing

Syntax : JQuery find alternative rows in a table using “even and odd” selector

$("#tableid tr:even").css("background-color", "#colorcode");
$("#tableid tr:odd").css("background-color", "#colorcode");

Selecting odd and even elements – jQuery Example-1

$(document).ready(function() {
	$("tr:odd").css("background-color","#4285F4");
    $("tr:even").css("background-color","#34A853");
});

Selecting odd and even elements – jQuery Example-2

$(document).ready(function() {
	$("tr:odd").css("background-color","red");
    $("tr:even").css("background-color","green");
});

Jquery :odd :even Selector Example

<div>Pakainfo.com - Dsp patel</div>
<div>Pakainfo.com - Angular king</div>
<div>Pakainfo.com - Php Master</div>
<div>Pakainfo.com - All Rounder</div>
----------------

$('div').each(function(i, el) 
{
   if (i % 2 === 0) 
   { 
		/* we are even */ 
		alert("we are even");
   }
   else 
   { 
	/* we are odd */ 
	alert("we are odd");
   }
});

“Alternate Table row color” using jQuery with Example

HTML-part for jQuery Alternate Table

<table>
    <tr>
        <td>Larvael-odd</td>
        <td>PHP-odd</td>
    </tr>
    <tr>
        <td>jQuery-even</td>
        <td>JavaScript-even</td>
    </tr>
    <tr>
        <td>AngularJs-odd</td>
        <td>VueJs-odd</td>
    </tr>
    <tr>
        <td>Magento-even</td>
        <td>Codiginter-even</td>
    </tr>
    <tr>
        <td>demo-odd</td>
        <td>Example-odd</td>
    </tr>
</table>

Jquery Part for jQuery Alternate Table

$('tr:odd').addClass('odd');
$('tr:event').addClass('even');

Style – CSS for jQuery Alternate Table

table, tr, td {
    border-collapse: collapse;
    border: 1px solid yellow;
}
table {
    width: 100%;
}
tr.odd {
    background: #4285F4;
}
tr.even {
    background: #3895F4;
}

View Demo

Also Read :  jquery remove last comma from Array Example

We hope you get an idea about Dynamically Change Alternate row colors using jQuery
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Recommended For You.

DataTables Column Search Server side processing
Today, We want to share with you DataTables Column Search Server side processing in PHP.In this post we will show

Add a Comment

Your email address will not be published. Required fields are marked *