[jQuery] Re: Hover Effect on 2 rows

Hi Kevin,

NO, you can not wrap your tr's with div's or span's.

Unfortunately Olaf's script will not work also.

A little ugly script should do the job:

$(function(){
$('.Row').hover(function(){
$(this).addClass('hover');
getNeighbor(this, 'Row').addClass('hover');
},
function(){
$(this).removeClass('hover');
getNeighbor(this, 'Row').removeClass('hover');
})
$('.AltRow').hover(function(){
$(this).addClass('hover');
getNeighbor(this, 'AltRow').addClass('hover');
},
function(){
$(this).removeClass('hover');
getNeighbor(this, 'AltRow').removeClass('hover');
})
});

function getNeighbor(el, cls){
if($(el).prev().hasClass(cls))
return $(el).prev();
if($(el).next().hasClass(cls))
return $(el).next();
}

----
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com

On Mon, Jan 26, 2009 at 5:45 AM, kevind <kevintigg@gmail.com> wrote:
>
> 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