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

Question

我有一个在 PageLoad() 中绑定(bind)的 GridView，我使用相同的数据动态创建显示在 GridView 下方的时间轴图像。如果我得到 15 行数据(非常典型)，GridView 中的每一行从上到下都会在时间轴 jpg 中从左到右绘制一条对应的垂直线。该图仅显示每个事件与其相邻事件的距离。

我确实在图像中的每行下方绘制了一个 id，以帮助识别 GridView 中的相应行，但定位起来很乏味。如果我可以在时间轴图像上移动鼠标并在我移动时突出显示 GridView 中的相应行，那就太棒了。我知道每条线的 x 坐标，因为我使用 Bitmap、Graphics、DrawLine 等从相同数据生成图像来制作和保存 jpg。

非常感谢任何帮助。

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