Link to home
Start Free TrialLog in
Avatar of abenbow
abenbow

asked on

Alternating row color and mouseover row color not working in IE7 or firefox

I've obviously gone wrong somewhere but this code looks right so any ideas where I have gone wrong??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.row1 {
      background-color:#CCCCCC;
      color:#333333;
}

.row2 {
      background-color:#FFFFFF;
      color:#333333;
}
.rowHover1 {
      background-color:#000000;
      color:#ffffff;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%">Heading</td>
    <td width="33%">Heading</td>
    <td width="33%">Count</td>
  </tr>
  <tr class="row1" onmouseover="this.class='rowHover1'" onmouseout="this.class='row1'">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2" onmouseover="this.class='rowHover1'" onmouseout="this.class='row2'">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1" onmouseover="this.class='rowHover1'" onmouseout="this.class='row1'">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2" onmouseover="this.class='rowHover1'" onmouseout="this.class='row2'">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of iscode
iscode
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
How about this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zvonko &#42;</title>
<style type="text/css">
<!--
.row1 {
     background-color:#CCCCCC;
     color:#333333;
}

.row2 {
     background-color:#FFFFFF;
     color:#333333;
}
.rowHover1 {
     background-color:#000000;
     color:#ffffff;
}
-->
</style>
<script>
function highLight(e){
  var theRow = (e.target)?e.target:e.srcElement;
  while(theRow&&theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  if(theRow){
    if(e.type.indexOf("out")>0){
      theRow.className=theRow.getAttribute("orgClass");
    } else {
      theRow.setAttribute("orgClass",theRow.className);
      theRow.className="rowHover1";
    }
  }
}
</script>
</head>

<body>
<table width="100%" onmouseover="highLight(event)" onmouseout="highLight(event)">
  <tr>
    <td width="33%">Heading</td>
    <td width="33%">Heading</td>
    <td width="33%">Count</td>
  </tr>
  <tr class="row1">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>


Avatar of ahoffmann
ahoffmann
Flag of Germany image
<script >
var oldbg="#ffffff";
function lighton(i){
        oldbg=i.style.backgroundColor;
        i.style.backgroundColor="CCCCCC";
}
function lightoff(i) { i.style.backgroundColor=oldbg; }
</script>
...
<tr  onMouseOver=lighton(this) onMouseOut=lightoff(this)>
...
Avatar of abenbow
abenbow

ASKER

bingo, thanks
Avatar of iscode
iscode
your welcome
glad I could help