Solved

javascript table mouseover

Posted on 2011-09-03
15
386 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 500 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

728 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