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

About me

Jonathan Spicer

My CV

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