hi,

i'm using JQuery to add a Class when a row is hovered over - i have it
working, however, each row of data has 2 rows in the table - I want to
have both rows change background color whenever i hover over either of
them.  The table already has 'stripes' for alternating records and
readability.

I'm using function:
=================
$(function(){
  $('.Row').hover(function(){
    $(this).addClass('hover');
  },
  function(){
    $(this).removeClass('hover');
  })
  $('.AltRow').hover(function(){
    $(this).addClass('hover');
  },
  function(){
    $(this).removeClass('hover');
  })
=================

the table structure looks like this:
     <table class="Grid" cellspacing="0" cellpadding="0">
        <tr class="Caption">
          <th>Comment</th>
          <th>Created</th>
        </tr>
        <tr class="Row">
                  <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
         <tr class="Row">
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <!-- -->
        <tr class="AltRow">
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
         <tr class="AltRow">
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </table>
==================
the individual rows highlight using STYLE of  '  tr.hover td
{background:yellow;}  '

how do get the 2 TR's to highlight together at the same time when i
float over the class 'Row' ?  Do i surround them with DIVs or SPAN?
Is this possible to group 2 table rows inside another element and get
the function to fire for both.

thanks in advance for any help

Reply via email to