current table td selected event jquery

Following example demonstrate how to pick up current clicked td in table and then applying some styles over the clicked td.

Example :

<!DOCTYPE html>
<html>
<head>
<title>td hover event jquery</title>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(function()
      {
    		// event on table td click function
        $('table').on('click', 'td', function() 
          {
            // checking if class in td, already active or not
            if ($(this).hasClass('active')) 
              {
              $(this).removeClass('active');
              }
            else 
              {
              $(this).addClass('active');
              }
          });
      });
</script>

<style type="text/css">
tr td:hover {
	background-color: #FFB0B0;
}

.active {
	background-color:#F00;
}
</style>
</head>
<body>
	<table width="200px" border="1">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
	</table>
</body>
</html>

Output :