Display different color in alternate row using jquery

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

21 thoughts on “Display different color in alternate row using jquery

  1. Mohamed Moupasher

    Thank you very much, but where can I fine the jquery.js File ?

  2. go to jquery.com and downaload the latest jquery.js file…..

  3. IC408

    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?

  4. 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″);

  5. Hi,
    i use the wordpress theme : iTheme, and after i add this code it affect my bachground color…
    i do not know why?

  6. @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

  7. Thanks for reply, i’ll try to learn more.

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

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

  10. @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”);

  11. Hi

    Thanks for the demo ..i am using this for my site

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

  13. kalam

    Hi
    I want deferent color of row in php in sql table
    pls help me

  14. sid

    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.

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

  16. Raghavendran

    Hi i am using this to color my alternate row but its not working. any suggestions?

    $(document).ready(function() {
    $(‘.display_tag tr:odd’).addClass(‘alt’);
    });

    Thanks
    Raghav

  17. Cesar

    You can do it with the new selectors CSS3
    table tr:nth-child(odd) { background-color:#CCC;}
    table tr:nth-child(even) { background-color:#e5e5e5;}

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>