smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

Hi Friends,

In my recent project work, I need to add background color on table row (even rows) on mouse over. I used jquery for this. Its very easy to do that. You need to call two java script function – one for adding background color onmouseover and second for returning back to original background color onmouseout.

It is php dynamic listing so you need to use variable $i for separating even and odd listing rows.

<table border='0' cellpadding='0' cellspacing='0'>
<?php
$i=0;
loop start here
?>

<tr id="special_list<?php echo $i;?>" onmouseover="javascript:insertback(<?php echo $i;?>);" onmouseout="javascript:removeback(<?php echo $i;?>);">
<td>Dynamic Listing Data</td>
</tr>

<?php
 ++$i;
loop ends here
?>
</table>

In above code we just call two java script functions onmouseover and onmouseout for changing background of table rows.

Following are the code of those two javascript functions. Its a jquery code that simply uses its property of adding css.

function insertback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#cccccc');
	}
}

function removeback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#FFFFFF');
	}
}

Jquery uses its property of adding css to element’s id. Hope this script help you to improve your listing display.

Enjoy it