如何根据图像上的鼠标悬停位置突出显示GridView行

Question

我有一个我在pageload（）中绑定的gridview，并且我使用相同的数据动态创建一个时间表图像，该时间表在GridView下方显示。如果我在GridView中从上到下获得15行数据（相当典型），将在时间轴JPG中从左到右绘制相应的垂直线。该图只是显示了每个事件与邻居的距离或距离的距离。

我确实在图像中的每一行下方绘制一个ID，以帮助识别GridView中的相应行，但可以找到相应的行。如果我只能在时间轴图像上移动鼠标并在Gridview中突出显示相应的行，那就太棒了。我知道每行的X配音，因为我使用位图，图形，绘制线等从相同数据中生成图像，以制作和保存JPG。

任何帮助都非常感谢。

asp.net 2.0，vs2010，c＃。

***编辑为包括网格的屏幕截图和生成的时间轴，鼠标徘徊在第五元素上。数据在网格中是自上而下的。相同的数据是时间表中从左到右的。

单击以查看屏幕截图

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');
  });
});