-1

一个gridview显示如下：

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

在鼠标悬停时，我希望每一行都突出显示。请记住，“组”和“颜色”列中的每个列表都是单独的行。这意味着“贵宾犬”和“蓝色”是一行，下一行是“德国牧羊犬”和“红色”，依此类推。

我想让所有这些行都像单行一样做出反应。基本上每一行都将基于“家庭”列。在鼠标悬停时，我想突出显示 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>
4

1 回答 1

2

给你所有的表格行一个狗类。为包含 DOG 标签的 TD 指定 ID“dogLabel”。这应该照顾它：

 $(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/

于 2013-03-08T22:41:26.723 回答