イメージ上でマウスのホバーの位置に基づいてグリッドビューの行を強調表示する方法は？

Question

私はPageLoad（）でバインドするGridViewを持っており、同じデータを使ってGridViewの下に表示されるタイムラインイメージを動的に作成しています。 15行のデータを取得すると（かなり一般的）、GridViewの各行は上から下に対応する縦線がタイムラインjpgで左から右に描画されます。グラフは、各イベントがその近傍からどれだけ近いか離れているかを示しています。

イメージの各行の下にidを描画して、GridViewの対応する行を識別するのに役立ちますが、探しが面倒です。タイムラインの画像をマウスで移動してGridViewの対応する行をハイライト表示させることができればすばらしいことになります。ビットマップ、グラフィック、DrawLineなどを使って同じデータからイメージを生成してjpgを作成して保存するので、各行のx座標を知っています。

大変助かりました。

asp.net 2.0、vs2010、c＃。

***グリッドと生成されたタイムラインのスクリーンショットを含むように編集され、マウスが5番目の要素の上にマウスを置いた状態で表示されます。データはグリッドの上から下に表示されます。同じデータがタイムラインの左から右に表示されます。

click to see screen shot

Answer 1

垂直グリッドを強調するために、あなたはあなたのマウスを上に保持されている列のインデックスを取得する必要があります。そして、対応する列の各行で、あなたが望むスタイルを実装します。

この商品をお求めの客様はこんな商品もお求めです。

$(function(){ 
 
    $('td').hover(function(){ 
 
    var indexofelement = $(this).index() + 1; 
 
    $(this).closest('table').find('tr').each(function(){ 
 
     $(this).find('td:nth-child(' + indexofelement + ')').css('background','grey'); 
 
    }); 
 
    },function(){ 
 
    var indexofelement = $(this).index() + 1; 
 
    $(this).closest('table').find('tr').each(function(){ 
 
     $(this).find('td:nth-child(' + indexofelement + ')').css('background','transparent'); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width:100%"> 
 
     <tr> 
 
     <td>Jill</td> 
 
     <td>Smith</td> 
 
     <td>50</td> 
 
     <td><img height="20" src="http://www.clipartbest.com/cliparts/yik/E5x/yikE5xeiE.png"/></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Eve</td> 
 
     <td>Jackson</td> 
 
     <td>94</td> 
 
     <td><img height="20" src="http://www.clipartbest.com/cliparts/yik/E5x/yikE5xeiE.png"/></td> 
 
     </tr> 
 
    </table>

編集：あなたが行に対応するハイライトしたい場合は 。

$(function(){ 
    $('img').hover(function(){ 
    $(this).closest('tr').css('background','grey'); 
    },function(){ 
    $(this).closest('tr').css('background','transparent'); 
    }); 
});