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.).

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

Pakainfo.com - Dsp patel
Pakainfo.com - Angular king
Pakainfo.com - Php Master
Pakainfo.com - All Rounder
----------------

$('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

    

        
Larvael-odd
        
PHP-odd
    
    

        
jQuery-even
        
JavaScript-even
    
    

        
AngularJs-odd
        
VueJs-odd
    
    

        
Magento-even
        
Codiginter-even
    
    

        
demo-odd
        
Example-odd
    

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

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!.