Display different color in alternate row using jquery

Monday, March 17, 2008, 18:24
javascript, jquery, tips and technique
19 comments

Most of the tabular data are organized in such a manner that they are easy to read. And for this, most of the developers use different color to highlight the alternate row.There are various method of displaying different row in different color but here I’m going to use the most simple method using jQuery.

VIEW LIVE DEMO

I’m going to show you the examples both in “tables” and “div”.

First , define the tables and div as shown below in the “index.html” file,

<table border="1">
  <tr><td>Michael</td></tr>
  <tr><td>Sam</td></tr>
  <tr><td>John</td></tr>
  <tr><td>Jason</td></tr>
</table>

 <div>Michael</div>
 <div>Sam</div>
 <div>John</div>
 <div>Jason</div>

Now, we need to write the script for displaying the different color in the alternate row,

<script src="jquery.js"></script>

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

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

The filters “even” and “odd” can be used in jQuery for selecting odd or even index of the elements.As you can see above the background color of the odd and even “div” are changed using the “css” method and “odd” and “even” filters of jQuery and the same applies for the even and odd “tr” which means for the row of table.

Download Full Source Code

Popularity: 14% [?]

Tags: javascript, jquery, tips

» Table row manipulation using jQuery JavaScript
» Jquery : Benefits, Examples and Free Ebook
» jQuery plugin: word-counter for textarea
» Top Floating message box using jQuery

19 Comments on “Display different color in alternate row using jquery”

Mohamed Moupasher wrote on 22 March, 2008, 21:19
Thank you very much, but where can I fine the jquery.js File ?
Roshan wrote on 23 March, 2008, 7:20
go to jquery.com and downaload the latest jquery.js file…..
IC408 wrote on 13 July, 2008, 18:25
Thank you for this post. Can you please explain how to restrict the effect to only divs inside, for example div id=”container”? So that it does not affect every div on the page?
Roshan wrote on 14 July, 2008, 5:26
let’s suppose that you’ve defined same class “alternate” then you can define the alternate color as

$(“.alternate:odd”).css(“background-color”, “#F4F4F8″);
$(“.alternate:even”).css(“background-color”, “#EFF1F1″);
kamal wrote on 22 October, 2008, 11:15
Hi,
i use the wordpress theme : iTheme, and after i add this code it affect my bachground color…
i do not know why?
Roshan wrote on 23 October, 2008, 5:04
@kamal – I think you should first understand jquery library before using it as it this function is changing background color of all divs of your web page
kamal wrote on 23 October, 2008, 17:34
Thanks for reply, i’ll try to learn more.
kamal wrote on 27 October, 2008, 3:45
Hi,
i have a strange problem, the script work fine in my local host, but after i host all the files in the server the colors don’t appear :
http://cuagadir.sc12.co.uk/marchespublics/2008/10/ao-442008/
Thanks for help.
Rogier wrote on 10 December, 2008, 16:24
Hi, I’m wondering. I see that I can use different colors for the background;

$(“div:odd”).css(“background-color”, “#F4F4F8″);

Can I also include other css items in this line and how?

Thanks for your time.
Roshan wrote on 11 December, 2008, 5:14
@rogier – for that you can make a class in css let’s say it “darkrow” and then you can add that in the following way using jQuery

$(”div:odd”)..addClass(“darkrow”);
anilreddy wrote on 31 January, 2009, 8:35
Hi

Thanks for the demo ..i am using this for my site
Thomas wrote on 16 March, 2009, 19:13
Woa, I cant believe how the Jquery power is big big BIG!

Its definitively the best javascript framework (should be directly include in all browsers!)
kalam wrote on 22 April, 2009, 5:16
Hi
I want deferent color of row in php in sql table
pls help me
sid wrote on 19 September, 2009, 10:35
For a table that is assigned a class name, I used:
$(“.table_class_name tr:even”).css(“background-color”, “#c00″);

For the first row, I used:
$(“.table_class_name tr:first”).css(“background-color”, “#800080″);

This was cool. Thanx.
BigAnz wrote on 8 January, 2010, 0:42
Great example of Jquery usage. Hats off, my question revolves around extending the .css (string) in order to specify further css properties. For instance I tried:
.css(“background”, “#666″, “color”, “#fff”) but that failed to iterate the color property. I know there is a way to do this, I am just unsure of the syntax.

Any help would be greatly appreciated. Thanks again for the great assistance your tutorial has given me!

Display different color in alternate row using jquery

Related Posts

19 Comments on “Display different color in alternate row using jquery”

Trackbacks

Write a Comment

Subscribe