Solved

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

Posted on 2006-11-19
5
1,320 Views
Last Modified: 2008-01-09
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>
0
Comment
Question by:abenbow
5 Comments
 
LVL 6

Accepted Solution

by:
iscode earned 500 total points
ID: 17975568
try 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>Untitled Document</title>
<style type="text/css">
<!--
.row1 {
     background: #CCCCCC;
     color: #333333;
}

.row2 {
     background: #FFFFFF;
     color:#333333;
}
.rowHover1 {
     background: #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.className='rowHover1'" onmouseout="this.className='row1'">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2" onmouseover="this.className='rowHover1'" onmouseout="this.className='row2'">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1" onmouseover="this.className='rowHover1'" onmouseout="this.className='row1'">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2" onmouseover="this.className='rowHover1'" onmouseout="this.className='row2'">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17975676
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>


0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 17975702
<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)>
...
0
 

Author Comment

by:abenbow
ID: 17975759
bingo, thanks
0
 
LVL 6

Expert Comment

by:iscode
ID: 17975765
your welcome
glad I could help
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i count words? 2 44
Multiflying 2 Input Text On a Table 7 20
Html form and modal / img src -problem 3 11
Hide Table in merge 3 10
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 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