Tricky mouseover event for row

C

Colin Steadman

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

Vjekoslav Begovic

Colin Steadman said:
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.
Click to expand...

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.onmouseover=setToActive;
rows.onmouseout=setToNormal;
}
}
function setToActive(){
var cells=this.getElementsByTagName("TD");
for (var i=0; i<cells.length; i++){
cells.className+="Active";
}
}
function setToNormal(){
var cells=this.getElementsByTagName("TD");
for (var i=0; i<cells.length; i++){

cells.className=cells.className.substring(0,cells.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
 
C

Chris

Colin Steadman said:
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!
Click to expand...

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

Colin Steadman

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.
Click to expand...


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.
Click to expand...


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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Javascript / FireFox help needed 9
Scrolling Table with Fix Columns stop working after adding onmouseover event 0
SendGrid email issue in responsive Gmail 1
Filter table rows based on multiple checkboxes value 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to have two html audio players on one page? 0

Members online

Total: 35 (members: 2, guests: 33)
Robots: 198

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,158
Latest member
Vinay_Kumar Nevatia

Latest Threads

Top