[jQuery] Re: Hover Effect on 2 rows

That's quite simple. Just adjust your CSS so that the rows 'blend
together', set cursor: pointer in your CSS, and use this:

$('.Row:even').each(function(){
var t = $(this), link = t.find('a')[0].href;
t.add( t.next('.Row') ).click(function(){
window.location = link;
});
});

use :odd and prev() if you're link is always on the second row.

On Jan 26, 12:19 pm, kevind <kevint...@gmail.com> wrote:
> followup question......now that i have nice hover working, i'd like to
> set the TR to be a link to a page, instead of the content i have now:
> ==========
> <tr {Issues:rowStyle} >
>     <td style="TEXT-ALIGN: right"><a href="{ID_Src}">Details</a></td>
> ==========
> I'd like to get rid of the extra column and the link and make the 2
> neighboring rows the link with the browser showing a 'hand' when
> mouseover occurs - any suggestions?
>
> thanks again
> Kevin
>
> On Jan 25, 7:45 pm, 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>&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