Question

我有一个GridView，我在PageLoad（）中绑定，我使用相同的数据动态创建一个显示在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');
  });
});

如何基于图像上的鼠标悬停位置突出显示网格视图行？

1 个答案: