如何根据鼠标悬停在图像上方的位置突出显示gridview行？

Question

I have a GridView that I bind in PageLoad() and I use the same data to dynamically create a timeline image that displays below the GridView. If I get 15 rows of data (pretty typical) each row in the GridView from top to bottom will have a corresponding vertical line drawn in the timeline jpg from left to right. The graph just shows how close or far apart each event is from its neighbors.

I do draw an id below each line in the image to help identify the corresponding row in the GridView but it's tedious to locate. It would be awesome if I could just move the mouse across the timeline image and have the corresponding rows in the GridView get highlighted as I go. I know the x-coordinates of each line because I generate the image from the same data using Bitmap, Graphics, DrawLine, etc. to make and save the jpg.

Any help greatly appreciated.

asp.net 2.0, vs2010, c#.

*** Edited to include a screen shot of the grid and the generated timeline with the mouse hovering over the 5th element. Data is top-to-bottom in the grid. Same data is left-to-right in the timeline.

click to see screen shot

Answer 1

To highlight a grid vertically, you need to get index of which column you are holding your mouse on. And implement the style you want on each of the rows corresponding columns.

Is this what you were looking for?

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

Edit: If you want to highlight corresponding row;

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