There is a simpler way:
$('.Row').each(function(){
var t = $(this), n = t.next('.Row'), direction = n.length ?
'next' : 'prev';
$(this).hover(function(){
t[direction]('.Row').andSelf().children('td').css
('background','red');
},function(){
t[direction]('.Row').andSelf().children('td').css
('background','yellow');
});
});
You could do it directly inside the hover() function, without each(),
but cacheing the objects will improve performance.
cheers,
- ricardo
On Jan 26, 8:29 am, jQuery Lover <ilovejqu...@gmail.com> wrote:
> 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 <kevint...@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> </td>
> > <td> </td>
> > </tr>
> > <tr class="Row">
> > <td> </td>
> > <td> </td>
> > </tr>
>
> > <!-- -->
> > <tr class="AltRow">
> > <td> </td>
> > <td> </td>
> > </tr>
> > <tr class="AltRow">
> > <td> </td>
> > <td> </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
