Alternate table row colours in WordPress

August 16, 2011

Using jQuery and CSS we can change the colour of alternate rows in a table. The code below will lock on to each table row and change the background colour on alternate rows. I’m making the change with CSS but you could always add a CSS class instead.

    jQuery('table tr').each(function(i, domEle)
         /* skip the first row (probably your headings) */
	  if ( i!=0 )
                /* if i / 2 has no remainer set the background to this */ 
		if ( i%2==0 )
	      jQuery( domEle ).css('background-color','#dcddde');
		else  /* if i / 2 does have a remainder change the colour to this */
		  jQuery( domEle ).css('background-color','#f3f3f4');

If you want add a class instead replace

jQuery( domEle ).css('background-color','#f3f3f4');

/* with */

jQuery( domEle ).addClass('odd');
Filed under: Programming — Tags: , , , , , , — admin @ 8:19 pm

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

About me

Jonathan Spicer


My curriculum vitae and a wealth of other facts about me.

Warhammer Quest tools

Flickering flame effect Flickering flame effect Flickering flame effect

Powered by WordPress