By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,842 Members | 2,368 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,842 IT Pros & Developers. It's quick & easy.

Tricky mouseover event for row

P: n/a
Help! I'm a stupid HTML bod and I dont do Javascript!

I have a grey coloured table that displays certain columns in either
red, green or orange to give meaning and emphasis to certain data.

What I want to do now is setup some kind of javascript event so that
when the user mouse's over a row the row changes colour to highlight
it. I've discovered however that I can only change the row into one
specific colour, and then back again into one specific colour using a
mouseover and mouseout event in the row.

I tried moving my event from the row tag into the table cell tags
thinking I was being clever (see below), but had I thought about it
I'd have realised this wasn't going to work either.

Can this actually be done in Javascript as I've exhausted my limited
javascript knowledge and dont know what else to try!

TIA,

Colin

<html>
<head>
<title>MO Test</title>
</head>
<style>

table
{
font-family: Arial;
font-size: 9;
}

td.normal
{
background-color: #C0C0C0;
}

td.normalActive
{
background-color: #B6B6B6;
}
td.high
{
background-color: #F4B6AE;
}

td.highActive
{
background-color: #E8ADA5;
}

td.medium
{
background-color: #EAEE84;
}

td.mediumActive
{
background-color: #DEE27D;
}

td.low
{
background-color: #84EE8E;
}

td.lowActive
{
background-color: #7DE287;
}

</style>

<body>

<table width="500" cellspacing="1">
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
<tr>
<td onmouseover="this.className='normalActive'"
onmouseout="this.className='normal'"
class="normal">A</td>
<td onmouseover="this.className='highActive'"
onmouseout="this.className='high'"
class="high">90</td>
<td onmouseover="this.className='mediumActive'"
onmouseout="this.className='medium'"
class="medium">50</td>
<td onmouseover="this.className='lowActive'"
onmouseout="this.className='low'"
class="low">12</td>
</tr>
</table>

</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
"Colin Steadman" <go****@colinsteadman.com> wrote:
I have a grey coloured table that displays certain columns in either
red, green or orange to give meaning and emphasis to certain data.

What I want to do now is setup some kind of javascript event so that
when the user mouse's over a row the row changes colour to highlight
it. I've discovered however that I can only change the row into one
specific colour, and then back again into one specific colour using a
mouseover and mouseout event in the row.


I hope this helps:

<html>
<head>
<title>MO Test</title>
</head>
<style>
table
{
font-family: Arial;
font-size: 9;
}
td.normal
{
background-color: #C0C0C0;
}
td.normalActive
{
background-color: #B6B6B6;
}
td.high
{
background-color: #F4B6AE;
}
td.highActive
{
background-color: #E8ADA5;
}
td.medium
{
background-color: #EAEE84;
}
td.mediumActive
{
background-color: #DEE27D;
}
td.low
{
background-color: #84EE8E;
}
td.lowActive
{
background-color: #7DE287;
}
</style>
<script type="text/javascript">
function addEvents(){
var mytable=document.getElementById("mytable");
var rows=mytable.getElementsByTagName("TR");
for (var i=0; i<rows.length;i++){
rows[i].onmouseover=setToActive;
rows[i].onmouseout=setToNormal;
}
}
function setToActive(){
var cells=this.getElementsByTagName("TD");
for (var i=0; i<cells.length; i++){
cells[i].className+="Active";
}
}
function setToNormal(){
var cells=this.getElementsByTagName("TD");
for (var i=0; i<cells.length; i++){

cells[i].className=cells[i].className.substring(0,cells[i].className.length-
6);
}
}
onload=addEvents;
</script>
<body>
<table id="mytable" width="500" cellspacing="1">
<tr>
<td class="normal">A</td>
<td class="high">90</td>
<td class="medium">50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal">A</td>
<td class="high">90</td>
<td class="medium">50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal">A</td>
<td class="high">90</td>
<td class="medium">50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal">A</td>
<td class="high">90</td>
<td class="medium">50</td>
<td class="low">12</td>
</tr>
<tr>
<td class="normal">A</td>
<td class="high">90</td>
<td class="medium">50</td>
<td class="low">12</td>
</tr>
</table>
</body>
</html>
Vjekoslav
Jul 20 '05 #2

P: n/a

"Colin Steadman" <go****@colinsteadman.com> wrote in message
news:40**************************@posting.google.c om...
Help! I'm a stupid HTML bod and I dont do Javascript!

I have a grey coloured table that displays certain columns in either
red, green or orange to give meaning and emphasis to certain data.

What I want to do now is setup some kind of javascript event so that
when the user mouse's over a row the row changes colour to highlight
it. I've discovered however that I can only change the row into one
specific colour, and then back again into one specific colour using a
mouseover and mouseout event in the row.

I tried moving my event from the row tag into the table cell tags
thinking I was being clever (see below), but had I thought about it
I'd have realised this wasn't going to work either.

Can this actually be done in Javascript as I've exhausted my limited
javascript knowledge and dont know what else to try!


Yes. I've adjusted your code below with two short Javascript functions
called on the mouseover and mouseout events:
One to activate each cell in the row and one to disactivate them.

Regards,
Chris.

<html>
<head>
<title>MO Test</title>
</head>
<style>

table
{
font-family: Arial;
font-size: 9;
}

td.normal
{
background-color: #C0C0C0;
}

td.normalActive
{
background-color: #B6B6B6;
}
td.high
{
background-color: #F4B6AE;
}

td.highActive
{
background-color: #E8ADA5;
}

td.medium
{
background-color: #EAEE84;
}

td.mediumActive
{
background-color: #DEE27D;
}

td.low
{
background-color: #84EE8E;
}

td.lowActive
{
background-color: #7DE287;
}

</style>

<body>

<table width="500" cellspacing="1">
<tr>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="normal">A</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="high">90</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="medium">50</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="low">12</td>
</tr>
<tr>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="normal">A</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="high">90</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="medium">50</td>
<td onmouseover="active(parentNode)"
onmouseout="inactive(parentNode)"
class="low">12</td>
</tr>
</table>

<script>
function inactive(rowObject) {
rowObject.childNodes[0].className="normal";
rowObject.childNodes[1].className="high";
rowObject.childNodes[2].className="medium";
rowObject.childNodes[3].className="low";
}
function active(rowObject) {
rowObject.childNodes[0].className="normalActive";
rowObject.childNodes[1].className="highActive";
rowObject.childNodes[2].className="mediumActive";
rowObject.childNodes[3].className="lowActive";
}

</script>
</body>
</html>


Jul 20 '05 #3

P: n/a
>
Yes. I've adjusted your code below with two short Javascript functions
called on the mouseover and mouseout events:
One to activate each cell in the row and one to disactivate them.

Regards,
Chris.

Thanks Chris, that is exactly the effect I was after. I think I can
see how you've done it to.

Parentnode is presumably the row containing the cell which triggered
the event. And the childnode(s) of row are obviously the cells
themselves, and you are changing the style of these individually.
Very elegant I like it!

I'm going to ask t> Yes. I've adjusted your code below with two short Javascript functions
called on the mouseover and mouseout events:
One to activate each cell in the row and one to disactivate them.

Regards,
Chris.

Thanks Chris, that is exactly the effect I was after. I think I can
see how you've done it to.

Parentnode is presumably the row containing the cell which triggered
the event. And the childnode(s) of row are obviously the cells
themselves. Your functions are simply changing the styles of the
cells very precisely using this information. Very elegant I like it!

Thankyou very much.

Regards,

Colin
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.