Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

javascript table mouseover

Posted on 2011-09-03
15
Medium Priority
?
398 Views
Last Modified: 2012-05-12
<table>
<tr><Td>hello</td>John</td><td><a href>Continue</a></td></tr>
<tr><Td>hi</td>Mary</td><td><a href>Continue</a></td></tr>
</table>

When each Continue link is mouse over And each row is mouseover, is it possible
to change the <tr> bgcolor = red for example? and also make Continue text in yellow eg.?
0
Comment
Question by:Webboy2008
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
  • +1
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36479141
using jQuery : http://jsfiddle.net/VMpEJ/
$("a:contains('Continue')").hover(
    function() {
        $(this).addClass("ayellow");
        $(this).closest("tr").addClass("trred");
    },
    function() {
        $(this).removeClass("ayellow");
        $(this).closest("tr").removeClass("trred");
    }
)

Open in new window

add css :
.trred {
    background:red;
}
.ayellow {
    color:yellow;
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36479147
another one : http://jsfiddle.net/n3xBX/1/
$("a:contains('Continue')").hover(
    function() {
        $(this).addClass("ayellow");
        $(this).closest("tr").addClass("trred");
    },
    function() {
        $(this).removeClass("ayellow");
        $(this).closest("tr").removeClass("trred");
    }
)
$("a:contains('Continue')").closest("tr").hover(
    function() {
        $(this).find("a:contains('Continue')").addClass("ayellow");
        $(this).addClass("trred");
    },
    function() {
        $(this).find("a:contains('Continue')").removeClass("ayellow");
        $(this).removeClass("trred");
    }
)

Open in new window

0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 36479777
This tutorial show you how to highlight when the whole row is hovered upon but you could easily adapt that for your needs:

http://www.codeunit.co.za/2010/01/26/highlight-a-table-row-using-jquery/
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 63

Expert Comment

by:Zvonko
ID: 36479976
Here my example:
<html>
<head>
<title>Zvonko &#42;</title>
<style>
tr.rowHow {
  background-color: cornflowerblue;
}
</style>
<script>
function hoverRow(e){
  if(!e) e=window.event;
  var theRow = (e.target)?e.target:e.srcElement;
  while(theRow && theRow.nodeName!="TR"){theRow = theRow.parentNode;}
  if(theRow){
    theRow.className = theRow.className.replace(" rowHow","");
    if(e.type=="mouseover"){theRow.className += " rowHow";}
  }
}
</script>
</head>
<body>
<table id=myTab onMouseOver="hoverRow(event)" onMouseOut="hoverRow(event)" >
<tr><td>hello</td><td>John</td><td><a href>Continue</a></td></tr>
<tr><td>hi</td><td>Mary</td><td><a href>Continue</a></td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:Webboy2008
ID: 36484862
Zvonko: Your codes don't work in IE 8/7
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36484924
I just checked in IE8.0.7600
0
 

Author Comment

by:Webboy2008
ID: 36485299
I think I know why. Your codes have reference of using tr.
any work around to reference by using class?
like create a .xxxx in style.
and <tr class=xxxx><td>?

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36485572
My code works.
Iy you want to address classes without jQuery then open a new Question and I can show you how.

0
 

Author Comment

by:Webboy2008
ID: 36487517
Zvonko: Your coding is working as well in IE. And my question also ask for
<a href>Continue</a> change to yellow when it is mouse over.

Is that possible as well?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36487537
For that you need no JavaScript.
All you need is CSS Style definition for the :hover
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

<style>
a:hover {
  background-color:yellow;
}
</style>

Open in new window

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 36487568
Here my example with :hover
<html>
<head>
<title>Zvonko &#42;</title>
<style>

#myTab tr.rowHow {
  background-color: cornflowerblue;
}

#MyTab a:hover {
  background-color: yellow;
}

</style>
<script>
function hoverRow(e){
  if(!e) e=window.event;
  var theRow = (e.target)?e.target:e.srcElement;
  while(theRow && theRow.nodeName!="TR"){theRow = theRow.parentNode;}
  if(theRow){
    theRow.className = theRow.className.replace(" rowHow","");
    if(e.type=="mouseover"){theRow.className += " rowHow";}
  }
}
</script>
</head>
<body>
<table id=myTab onMouseOver="hoverRow(event)" onMouseOut="hoverRow(event)" >
<tr><td>hello</td><td>John</td><td><a href="#">Continue</a></td></tr>
<tr><td>hi</td><td>Mary</td><td><a href="#">Continue</a></td></tr>
</table>
</body>
</html>

Open in new window

0
 

Author Comment

by:Webboy2008
ID: 36487639
Working ... great and thank. However, I found one more issue.
My subject row now allow mouse-over as well and that look funny. anything to disable the mouseover
for the subject columns?

<tr><td>Column1</td><td>Column2</td></tr>

<table id=myTab onMouseOver="hoverRow(event)" onMouseOut="hoverRow(event)" >
<tr><td>Column1</td><td>Column2</td></tr>
<tr><td>hello</td><td>John</td><td><a href="#">Continue</a></td></tr>
<tr><td>hi</td><td>Mary</td><td><a href="#">Continue</a></td></tr>
</table>

Thanks
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 36487709
Open an new Question for that please.
0
 

Author Comment

by:Webboy2008
ID: 36487821
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

598 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