Set row active

JavaScript
1

I have a table, whereby when i hover over any row, that row is set to class=active, and the previous active row is set to class=normal.

So far i’m doing this with mouseover and mouseout on each row, however, it doesn’t leave a row active if no others are hovered over.

onmouseover=\“this.className=‘active’;\” onmouseout=\“this.className=‘normal’\”

How can i only set the rows to normal, when another row is hovered over and set to active? Loop through tr?

2

That’s right. You would get rid of the onmouseout event, and use a loop to remove the class name from all other form rows before adding the active class name.

You may find it easier to use a function to perform that work, so that you can just call that function instead from the event.

3

one way to do it is

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.normal {
 background-color: green
}
 
.active {
 background-color: red
}
 
</style>
<script language="JavaScript" type="text/javascript">
 
function setDefClass() {
 for(i=0; i < rows.length; i++) {
     //rows[i].setAttribute('class','normal');  this didn't work in IE7
        rows[i].className = 'normal';  
    }
}
 
window.onload=function() {
    rows = document.getElementById("myTable").getElementsByTagName("tr");
    //set the default class to these rows
    setDefClass();
    //set the onmouseover event handler
    for(i=0; i < rows.length; i++) {
        rows[i].onmouseover = function () {
            setDefClass();
            this.className = 'active';
        }
    }
    //set the onmouseout event handler
    for(i=0; i < rows.length; i++) {
        rows[i].onmouseout = function () {
         setDefClass();
        }
    }
}
</script>
 
</head>
<body>
 
<table id="myTable">
    <tr>
            <td>r1c1</td><td>r1c2</td>
    </tr>
    <tr>
            <td>r2c1</td><td>r2c2</td>
    </tr>
    <tr>
            <td>r3c1</td><td>r3c2</td>
    </tr> 
</table>
 
</body>
</html>

if you want a row to remain active after you hover off the table, then remove the onmouseout event handler in the js.