Solved

javascript table mouseover

Posted on 2011-09-03
15
380 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
Html Table looping 4 25
Add or delete table rows 10 53
Copying table data to one another 15 29
How to check if a check box is active using Java Script? 2 18
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 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 …

809 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