如何在没有盘旋的情况下从表格行中删除垃圾按钮？ [英] How to make a trash button from table row disappear when is not hovered?

问题描述

我有一个包含数据的表格，每行的最后一列都是fa-trash-o图标，只需要在其悬停时显示，并在点击时删除该行。

我参与删除行工作以及消失，但两种功能组合不起作用



我尝试过：



这是我的代码：

I have a table with data and in last column in each row is fa-trash-o icon which needs just to be shown when its hovered and also to delete that row when is clicked on it.
I made part for deleting row working and also for disappearing, but both function in combination doesn't work

What I have tried:

Here is my code:

<tr>
    <td class="tg-98kr">Libby Folfax</td>
    <td class="tg-98kr">[e-mail]</td>
    <td class="tg-98kr">City</td>
    <td class="tg-98kr">Sometimes</td>
    <td class="tg-98kr">Mon, Tue, Wed</td>
    <td class="tg-98kr">13/08/2018 11:29AM</td>
    <td class="tg-98kr"><a href=""><button type="button" onclick="deleteRow(this)" class=" w3-button" style=" hover:display"></button></a></td>
  </tr>
  <tr>
    <td class="tg-q3hw">Nick Dean</td>
    <td class="tg-q3hw">[e-mail]</td>
    <td class="tg-q3hw">City</td>
    <td class="tg-q3hw">Always</td>
    <td class="tg-q3hw">Fri, Sat</td>
    <td class="tg-q3hw">13/08/2013 11:29AM</td>
    <td class="tg-q3hw"><a ><button type="button" onclick="deleteRow(this)"  class=" w3-button " style=" hover:display"></button></a></td>
  </tr>
</table>
</section>

<script>
function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
</script>

table a{
   display: none;
}
table tr:hover a{
    display: block;
}

推荐答案

嗯......我不知道你为什么要将你的按钮包裹在锚标签中，也不知道内联样式，但就这一点而言，它们没有帮助 - 无论如何这对我有用：

Well... I don't know why you're wrapping your buttons in anchor tags, nor the inline styles, but they don't help as far as this is concerned - anyway this works for me:

<style type="text/css">
table input{
   display: none;
}
table tr:hover input{
    display: block;
}
    </style>

<table>
<tr>
    <td class="tg-98kr">Libby Folfax</td>
    <td class="tg-98kr">[e-mail]</td>
    <td class="tg-98kr">City</td>
    <td class="tg-98kr">Sometimes</td>
    <td class="tg-98kr">Mon, Tue, Wed</td>
    <td class="tg-98kr">13/08/2018 11:29AM</td>
    <td class="tg-98kr"><input type="button" onclick="deleteRow(this)" class="w3-button"  value="delete" /></td>
  </tr>
  <tr>
    <td class="tg-q3hw">Nick Dean</td>
    <td class="tg-q3hw">[e-mail]</td>
    <td class="tg-q3hw">City</td>
    <td class="tg-q3hw">Always</td>
    <td class="tg-q3hw">Fri, Sat</td>
    <td class="tg-q3hw">13/08/2013 11:29AM</td>
    <td class="tg-q3hw"><input type="button" onclick="deleteRow(this)"  class="w3-button" value="delete" /></td>
  </tr>
</table>

<script type="text/javascript">
       function deleteRow(btn) {
          var row = btn.parentNode.parentNode;
          row.parentNode.removeChild(row);
       }
    </script>

这篇关于如何在没有盘旋的情况下从表格行中删除垃圾按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！