highlight cells onmouseover

[RLJ]

I use the following code to generate a table of results from a MySQL query. As you can see, some of the rows have an onmouseover event, calling the function 'highlightcells'.

 

$i=1;
        while($arr = mysql_fetch_array($result, MYSQL_NUM))
        {
            $table .= "<tr onMouseOver=\"highlightcells('parent".$i."A','parent".$i."B','parent".$i."C','parent".$i."D','parent".$i."E')\" onMouseOut=\"this.bgColor='#FFFFFF';\">" 
                          ."<td width='5px';><input type='checkbox'></td>"
                          ."<td id='parent".$i."A' width='100px' onclick=\"expandcollapse('subb".$i."a', 'subb".$i."b', 'subb".$i."c', 'check".$i."')\" style='border-left: 1px solid #808080; border-bottom: 1px solid #808080;'>".$arr[0]." ".$arr[1]."</td>"
                          ."<td id='parent".$i."B' onclick=\"expandcollapse('subb".$i."a', 'subb".$i."b', 'subb".$i."c')\" style='border-bottom: 1px solid #808080;'>".$arr[2]."</td>"
                          ."<td id='parent".$i."C' onclick=\"expandcollapse('subb".$i."a', 'subb".$i."b', 'subb".$i."c')\" style='border-bottom: 1px solid #808080;'>".$arr[3]."</td>"
                          ."<td id='parent".$i."D' onclick=\"expandcollapse('subb".$i."a', 'subb".$i."b', 'subb".$i."c')\" style='border-bottom: 1px solid #808080;'>".$arr[4]."</td>"
                          ."<td id='parent".$i."E' onclick=\"expandcollapse('subb".$i."a', 'subb".$i."b', 'subb".$i."c')\" style='border-bottom: 1px solid #808080; border-right: 1px solid #808080;'>".$arr[5]."</td></tr>"
                     ."<tr id='subb".$i."a'; style='display:none';><td></td><td colspan='5' style='border-bottom: 1px solid #808080; border-right: 1px solid #808080; border-left: 1px solid #808080;';> ".wordwrap ($arr[6], 53, '<br />',$cut = true)."</td></tr>"
                     ."<tr id='subb".$i."b'; style='display:none';><td></td><td colspan='5' style='border-bottom: 1px solid #808080; border-right: 1px solid #808080; border-left: 1px solid #808080;'> ".wordwrap ($arr[7], 53, '<br />',$cut = true)."</td></tr>"
                     ."<tr id='subb".$i."c'; style='display:none';><td></td><td colspan='5' style='border-bottom: 1px solid #808080; border-right: 1px solid #808080; border-left: 1px solid #808080;'> ".wordwrap ($arr[8], 53, '<br />',$cut = true)."</td></tr>";
        //echo $i;
        $i++;
        }
        $table .= "</table>";
        echo $table;

 

where 'highlightcells' is as follows:

 

function highlightcells(cellA,cellB,cellC,cellD,cellE)
{
    GetElementByID(cellA).style.background-color='gold';
    GetElementByID(cellB).style.background-color='gold';
    GetElementByID(cellC).style.background-color='gold';
    GetElementByID(cellD).style.background-color='gold';
    GetElementByID(cellE).style.background-color='gold';
}

 

What I want to do is highlight the specified cells in gold onmouseover (and have them return back to white onmouseout). The cells to be highlighted are always the entire row except for the first column.

 

Can someone pls show me how to do this? My Javascript isn't working and I can't figure out why. Thanks!

[haku]

This should explain how to do it:

 

http://www.jaypan.com/blog/highlighting-html-columns-jquery-and-css

 

Edit: unless you want the row to be highlighted, and not the column. If that is the case, then you can add the following to your CSS (in the head or external - inline won't work) and you don't even need any JS:

 

tr:hover
{
  background-color:gold;
}

[RLJ]

Thanks,

tr:hover
{
  background-color:gold;
}

looks promising, but I want the whole row except for the first cell to be highlighted. Is there a way to apply tr:hover only to cells with a certain class?

[haku]

Yes.

 

HTML:

<table>
  <tr>
    <td>column1</td>
    <td class="hover-activate">column2</td>
    <td class="hover-activate">column3</td>
    <td class="hover-activate">column4</td>
  </tr>
  <tr>
    <td>column1</td>
    <td class="hover-activate">column2</td>
    <td class="hover-activate">column3</td>
    <td class="hover-activate">column4</td>
  </tr>
</table>

 

CSS:

tr:hover .hover-activate
{
  background-color:gold;
}

 

Moving this to CSS since it's not a javascript issue anymore.

 

[mreish]

I haven't seen this mentioned yet so forgive me if it's a repeat but you can't use the same ID more than once per document.  So putting each TD with the same ID is a no-no. Use a class instead.

 

Here's how I would do it.  Notice the first row is the table header. I don't normally want that to highlight so I make a class at assign it to the other TR tags.

 

<style type="text/css">
tr.coolEffect:hover {
background: #00FFFF;
}
</style>

 

<table width="200" border="0" cellspacing="0" cellpadding="5">
     <tr>
          <th scope="col"> </th>
          <th scope="col"> </th>
          <th scope="col"> </th>
     </tr>
     <tr class="coolEffect">
          <td> </td>
          <td> </td>
          <td> </td>
     </tr>
     <tr class="coolEffect">
          <td> </td>
          <td> </td>
          <td> </td>
     </tr>
</table>

 

Edit: Oops. I just re-read the original post that says highlight cells and not rows.  Sorry.

[TheFilmGod]

<table width="200" border="0" cellspacing="0" cellpadding="5">
     <tr>
          <th scope="col"> </th>
          <th scope="col"> </th>
          <th scope="col"> </th>
     </tr>
     <tr>
          <td> </td>
          <td> </td>
          <td> </td>
     </tr>
     <tr>
          <td> </td>
          <td> </td>
          <td> </td>
     </tr>
</table> 

 

table tr:hover td {
background: gold;
}
table tr:hover td:first-child {
background: white;
}

 

No need for classes. No need for ids.

[haku]

I prefer not to use :first-child for legacy reasons, which is why I left it out.

 

So there is a reason...

[RLJ]

Thanks very much Haku and others! Using CSS & different classes seems to work well.