oops. posted my testing code. here's the right one:
$('.Row').each(function(){
var t = $(this), n = t.next('.Row'),
direction = n.length ? 'next' : 'prev';
t.hover(function(){
t[direction]('.Row').andSelf().addClass('hover');
},function(){
t[direction]('.Row').andSelf().removeClass('hover');
});
});
On Jan 26, 10:21 am, Ricardo Tomasi <ricardob...@gmail.com> wrote:
> 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
