?
Solved

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

Posted on 2011-04-29
3
Medium Priority
?
843 Views
Last Modified: 2012-05-11
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
Comment
Question by:dev09
3 Comments
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 35495767
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
 
LVL 61

Expert Comment

by:HainKurt
ID: 35495788
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
 

Author Closing Comment

by:dev09
ID: 35495793
Perfect, thank you!!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question