Posted inTechnology / Ajax / JavaScript / jQuery

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

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype