• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

Unselect table cell on blur with jscript

Hi, I am trying to write the code for a table that when one of its cells is clicked it should highlight it, and when another cell is clicked then it should return the former cell to its original state and highlight the currently clicked cell. Any suggestions?
0
degaray
Asked:
degaray
1 Solution
 
Gurvinder Pal SinghCommented:
check this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		tr:first-child 
		{
			font-weight:bold;
		}

		td.selected
		{
			background-color: #5600ff;
			color:white;
		}

	</style>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("td").click(function(){
				$("td").removeClass("selected");
				$(this).addClass("selected");
			});
		})
	</script>

</HEAD>

<BODY>
	<table>
		<tr>
			<td> S.No </td> <td> name </td>  <td> age </td>  
		</tr>
		<tr>
			<td> 1 </td> <td> Name 1 </td>  <td> Age 1 </td>  
		</tr>
		<tr>
			<td> 2 </td> <td> Name 2 </td>  <td> Age 2 </td>  
		</tr>
		<tr>
			<td> 3 </td> <td> Name 3 </td>  <td> Age 3 </td>  
		</tr>
		<tr>
			<td> 4 </td> <td> Name 4 </td>  <td> Age 4 </td>  
		</tr>
		<tr>
			<td> 5 </td> <td> Name 5 </td>  <td> Age 5 </td>  
		</tr>
	</table>
</BODY>
</HTML>

Open in new window

0
 
degarayAuthor Commented:
Thanks, that helped a lot!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now