Jump to content

highlight cells onmouseover


RLJ

Recommended Posts

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!

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<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. :)

Link to comment
Share on other sites

  • 1 month later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.