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