javascript table mouseover

<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.?
Webboy2008Asked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
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
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Eternal_StudentCommented:
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
 
ZvonkoSystems architectCommented:
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
 
Webboy2008Author Commented:
Zvonko: Your codes don't work in IE 8/7
0
 
ZvonkoSystems architectCommented:
I just checked in IE8.0.7600
0
 
Webboy2008Author Commented:
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
 
ZvonkoSystems architectCommented:
My code works.
Iy you want to address classes without jQuery then open a new Question and I can show you how.

0
 
Webboy2008Author Commented:
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
 
ZvonkoSystems architectCommented:
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
 
Webboy2008Author Commented:
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
 
ZvonkoSystems architectCommented:
Open an new Question for that please.
0
 
Webboy2008Author Commented:
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.

All Courses

From novice to tech pro — start learning today.