Alternate row colors with JQuery

Alternate row colors with JQuery

JQuery is an interesting subject. Editing and manipulating a webpage becomes so very easy that you would love to learn this subject in all ways. Client side rendering as well as client-server intervention is possible with JQuery methods.

Don’t know JQuery basics? Learn here. Also refer to the official documentation for further guidance.

Today we would discuss a technique to create alternate row colors in table layouts with JQuery. Tables are a prime part of HTML structures. Tables give a structured layout to row-column data from a database or even a static source. Imagine you need to create a table that has got some specific color requirements for its row backgrounds. What would you do? Here’s the solution.

Alternate row colors in tables

Creating tables is very easy in HTML. I am sure you all know that. Now, your CSS might not declare any color styling for your table element by default. We normally do not do that. Our idea is to create JQuery code that would give a dynamic styling to the table when the webpage loads. Also, the number of rows in the table might not be fixed. So, for infinite number of rows the background color for every adjacent row shall be different.

Here’s our code –

$(document).ready(function(){
	$(‘table’).find(‘tr:odd’).css(‘background-color’,’#f5f5f5’);
	$(‘table’).find(‘tr:even’).css(‘background-color’,’#d5d5d5’);
});

Yeah! That’s it. You’re all done. That’ll make sure you get alternate row colors in your table elements. But, this is for all tables that are present in the webpage. If you want to target some specific table, just give the table an id (suppose ‘demotable’) and do the following –

$(document).ready(function(){
	$(‘#demotable’).find(‘tr:odd’).css(‘background-color’,’#f5f5f5’);
	$(‘#demotable’).find(‘tr:even’).css(‘background-color’,’#d5d5d5’);
});

The above code would only make changes to one particular table.

Now, what if you want to add some more changes along with the alternate row colors in the background? I have a solution for that as well. Try this out –

/* Make a CSS class */
.changes{
background-color : #555;color: #fff; border: 1px dashed green;
}
$(document).ready(function(){
	$(‘#demotable’).find(‘tr:odd’).addClass(‘changes’);
});

Adding alternate row colors in list items

List items are similar to table rows when the display style is adjusted accordingly. List items when displayed as table-row or inline-block, they behave and show up like table rows. You might want to show alternate row colors in these elements as well. In that case, we need to make some very minor changes to our above code.

/* For the list-item styling */ 
ul{ display:block;width:99%; }
ul li{ display:inline-block; }

So, after the above style has been set each ‘li’ behaves as a ‘td’ element and the ‘ul’ behaves as the ‘tr’ element. Now we write the JQuery as –

$(document).ready(function(){
	$(‘ul:odd’).css(‘background-color’,’#f5f5f5’);
	$(‘ul:even’).css(‘background-color’,’#d5d5d5’);
});

Alternate row colors upon hover

On hover behavior is also very common in web designing. It gives an appeal to the UI and also steals quite a lot of attraction of the user towards a particular element. So, if you wish to implement alternate row colors showing up only when a user hovers over a particular row – you can do that in the following two ways –

Hover event in JQuery

In this procedure, we track the hover event with the help of JQuery and apply necessary styling accordingly to obtain alternate row colors. Suppose the default background color for the table row is ‘transparent’, then we write the following code-

$(document).ready(function(){
	$(‘table’).find(‘tr:odd’).hover(function(){
	$(this).css(‘background-color’,’#f5f5f5’);
},function(){
	$(this).css(‘background-color’,’transparent’);
});
$(‘table’).find(‘tr:even’).hover(function(){
	$(this).css(‘background-color’,’#d5d5d5’);
},function(){
	$(this).css(‘background-color’,’transparent’);
});
});

Hover event in CSS

If you wish to track the hover event in CSS and just hook it to JQuery, you just need to declare styling for the ‘: hover’ event in CSS. The rest is all same. Here’s the code for this procedure –

/* Declare the CSS as two separate classes */
.odd, .even{
background : transparent;
}
.odd:hover{
background : #f5f5f5;
} 
.even:hover{
background : #d5d5d5;
}
$(document).ready(function(){
		$(‘table’).find(‘tr:odd’).addClass(‘odd’);
		$(‘table’).find(‘tr:even’).addClass(‘even’);
});

That is all! Have fun with these codes and do let me know your feedback.

  • Lance E Sloan

    I was interested in alternating background colors for list items, so I tried your example. It didn’t work for me at all. Do you have any live demos of that approach? An example with nested lists would be especially good.

    Also, I noticed that your site has replaced the simple single-quotes (‘) in your code with fancy typographical quotes (‘ and ’). You should try to prevent that.

    • Hi Lance,

      Great to see that you stopped by and had a look at my tutorial. These codes mentioned here are fully working. I will put up a demo as soon as possible for you to have a look. An example with nested lists. :)

      Also, the fancy quotes are done by the code display plugin I use in WordPress. Not my fault you see..I’ll see what I can do about that

      Thanks a lot!

  • Hi @lsloan:disqus, I have added the demo of these codes. Have a look. If you still have doubts, just download the source codes. They are fully working. The demos have been made from that code itself.