javascript table mouseover

Webboy2008
Webboy2008 used Ask the Experts™
on
<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.?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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

leakim971Multitechnician
Top Expert 2014

Commented:
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

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/
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
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

Author

Commented:
Zvonko: Your codes don't work in IE 8/7
Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
I just checked in IE8.0.7600

Author

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

Zvonko זְאֵבSystems architect
Top Expert 2006

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

Author

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?
Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
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

Systems architect
Top Expert 2006
Commented:
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

Author

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
Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
Open an new Question for that please.

Author

Commented:

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial