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: background, color, colour, javascript, jquery, table, wordpress — admin @ 8:19 pm