在TD Row中显示图标

Question

目标：
当我将光标放在td行内时，会出现一些图标，您应该启用它们。图标包含链接。

当光标位于新的td行时，前一个td行应为默认值，新的td行应具有新图标。

请看看图片。

问题：
我不知道如何创建它。

信息：
我使用bootstrap，jquery和Visual Studio。

Answer 1

您可以在创建行时放置所有图标。只是给出风格

style='display:none;'

然后通过jquery循环遍历行

$(table tr).each(function () {
    if ($(this).is(':hover')) 
      $('icondiv').show();
    else
    $(this).hide();
});

然后，如果您想根据点击这些图标执行某些操作，那么您可以将data-*属性与这些图标一起放置并跟踪该特定行。

从jquery，你可以使用data函数获取data()属性，如

$('icondiv').data('id');

Answer 2

首先使用css 在html中将class添加到包含图标的div

<div class="IconsDiv">
    <!-- Icons here  -->
</div>

和css

.IconsDiv{
    display: none;
}
tr:hover .IconsDiv{
    display: block;
}

另一种方式：如果你想使用jquery

$(document).ready(function(){
   $('table tr').hover(function(){
      $(this).find('.IconsDiv').show();
   },function(){
      $(this).find('.IconsDiv').hide();
   });
});