Question

gridview显示如下：

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

鼠标悬停时，我想要突出显示每一行。请注意，“group”和“color”列中的每个列表都是一个单独的行。这意味着“贵宾犬”＆amp; “蓝色”是一行，下一行是“德国牧羊犬”和“红色”等等。

我想让所有这些行反应就好像它们是一行一样。基本上每行都将基于“FAMILY”列。鼠标悬停时，我想突出显示row1（dog），列中的所有行“group”＆amp;与DOG相关的“颜色”也会突出显示。

到目前为止，我已经将每一行都显示在鼠标悬停上，作为单行，但我无法弄清楚如何在鼠标悬停时使类似的行充当单个实体。

RENDERED 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标签的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/

将多个gridview行突出显示为一个

1 个答案: