Display different color in alternate row using jquery

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

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

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

• Share
  Delicious Digg Design Float Mixx Reddit StumbleUpon Technorati
• Printable version

Related Posts

» Table row manipulation using jQuery JavaScript
» Jquery : Benefits, Examples and Free Ebook
» jQuery plugin: word-counter for textarea
» jQuery is the most popular JavaScript and Ajax Framework

15 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

Trackbacks

1. PHP Coding School » Blog Archive » php tips [2008-03-17 21:43:41]
2. Table row manipulation using jQuery JavaScript

Write a Comment