-1

グリッドビューは次のように表示されます。

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

マウスオーバーで、各行を強調表示したいと思います。列「group」と「color」の各リストは別々の行であることに注意してください。これは、「プードル」と「青」が1つの行であり、次の行が「ジャーマンシェパード」と「赤」というようになることを意味します。

それらすべての行を単一の行であるかのように反応させたいと思います。基本的に、各行は「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>
4

1 に答える 1

2

すべてのテーブル行に犬のクラスを与えます。DOGラベルを格納するTDに「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/

于 2013-03-08T22:41:26.723 に答える