高亮顯示多個gridview的行作爲一個

Question

一個GridView顯示如下：

 FAMILY  GROUP    COLOR 
=============================================== 
     |  | Poodle   | Blue 
ROW1 | DOG | German Shepherd | Red 
     |  | Pitbull   | Orange 
=============================================== 
     |  | Evil    | green 
ROW2 | CAT | tabby   | purple 

在鼠標移到予想的每一行被加亮。請記住，「組」和「顏色」列中的每個列表都是一個單獨的行。這意味着「長卷毛狗」&「藍色」是一排，下一排將是「德國牧羊犬」和「紅色」等等。

我想有所有這些行作出反應，如果他們是一個單行。基本上每一行都將基於「FAMILY」列。在鼠標懸停時，我想突出顯示row1（狗），並且同時突出顯示與DOG關聯的「組」&「顏色」列中的所有行。

到目前爲止，我已經得到了要在鼠標突出的每一行，作爲一個單行，但我無法弄清楚如何使類似的行上作爲一個單一的實體鼠標。

呈現的HTML：

<table class="gridview" cellspacing="0" rules="all" border="1" id="MainContent_gvAnimalInfo" style="width:90%;border-collapse:collapse;"> 
    <tr> 
     <th scope="col"> 
        <a>FAMILY</a> 
       </th> 
       <th scope="col">GROUP</th> 
       <th scope="col">COLOR</th> 
    </tr> 
      <tr> 
     <td rowspan="3">DOG</td> 
       <td>Poodle</td> 
       <td>Blue</td> 
    </tr> 
      <tr> 
     <td>German Shepherd</td> 
       <td>Red</td> 
    </tr> 
      <tr> 
     <td>Pitbull</td> 
       <td>Orange</td> 
    </tr> 
</table> 

Answer 1

給你的所有錶行的一類犬。給容納DOG標籤的運營商提供一個「dogLabel」的ID。這應該照顧它：

$(document).ready(function() { 
     $(".dog").hover(
      function() { 
       $(this).css("background", "yellow"); 
       $("#dogLabel").css("background", "yellow"); 
     }, 
      function() { 
       $(this).css("background", ""); 
       $("#dogLabel").css("background", ""); 
      } 
     ); 
}); 

小提琴以及：http://jsfiddle.net/qDYAP/1/