在TD Row中显示图标

Goal:
When I have the cursor inside of a td row, some icon should appear, and you should enable to click them. The icons contain link.

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

When you have the cursor in a new td row, the previous td row should be default and the new td row should have the new icon.

将光标放在新的td行中时,前一个td行应该是默认值,新的td行应该有新的图标。

Pleae take a look at the picture.

请看看图片。

Problem:
I don't know how to create it.

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

Information:
I'm using bootstrap, jquery and Visual Studio.

信息:我正在使用bootstrap,jquery和Visual Studio。

2 个解决方案

#1

You can place all the icons when you are creating the rows. just give the style

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

style='display:none;'

then loop thorugh the rows via jquery

然后通过jquery循环遍历行

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

Then if you want to perform some action based on the click on those icons, then you can place an data-* attribute along with those icons and track that particular row.

然后,如果要基于对这些图标的单击执行某些操作,则可以将data- *属性与这些图标一起放置并跟踪该特定行。

From jquery you can fetch the data attributes using data() function like

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

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

#2

First way just use css in html add class to div which include icons

第一种方法只是在html中使用css将div添加到包含图标的div中

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

and in css

并在css

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

another way : if you want to use jquery for that

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

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