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

Highlight <tr> on click, un-highlight other <tr>s

Hi guys,

I am trying to have an onclick event to highlight a <tr> in an <table>.  I can get the rollover highlight working, no problem, see below:

<style>
tr.rowHover:hover{background-color:#FEFFE8; }
</style>

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" id="updates">
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
</table>

Open in new window


And this is something that i want to continue to work.

Once one of the <tr> is clicked on and highlighted i'd like it to un-highlight any other <tr> that has been clicked on - so only <tr> is ever highlighted at once.

I've searched around and think jquery (perhaps livequery) css, or some sort of javascript will be able to do this but not sure.  

The amount of <tr>'s are not set, and are dynamically added to as well. So would need the ability for it to update all/any <tr>'s on the page, and only highlight a different colour to the hover colour for the <tr> that has been clicked on.

Hope you guys can help.
Thanks
0
dev09
Asked:
dev09
1 Solution
 
Greg AlexanderLead DeveloperCommented:
This what you are looking for?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>

$(document).ready(function(){

	$(".rowHover").click(function(){
		$(".rowHover").css('background-color','');
		$(this).css('background-color','#FEFFE8');
	})
	
})

</script>
<style>
tr.rowHover:hover{background-color:#FEFFE8; }
</style>

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" id="updates">
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
  <tr class="rowHover">
    <td class="underline" style="text-indent:7px;">Blaa</td>
  </tr>
</table>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
I guess this is what you want : highlight + select combo
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<style>
.highlight{background-color:yellow}
.selected{background-color:lime}
</style>

<script>
var selRow;
$(document).ready(function(){
	$("#myTable tr").click(function(){
		if(selRow) $(selRow).removeClass("selected");
		$(this).addClass("selected");
		selRow=this;
	})

	$("#myTable tr").hover(
   function()
   {
    $(this).addClass("highlight");
   },
   function()
   {
    $(this).removeClass("highlight");
   }
  )
	
})
</script>

</head>

<body>

<table id=myTable style="width:600px; border:1px solid gray">
	<tr><td>UserName</td><td>HainKurt</td></tr>
	<tr><td>Location</td><td>Canada</td></tr>
	<tr><td>Level</td><td>Master</td></tr>
</table>

</body>
</html>

Open in new window

0
 
dev09Author Commented:
Perfect, thank you!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

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