Member 13682154 Ответов: 1

Как сделать так, чтобы кнопка корзины из строки таблицы исчезла, когда она не зависла?

У меня есть таблица с данными, и в последнем столбце в каждой строке есть значок fa-trash-o, который нужно просто показать, когда он наведен, а также удалить эту строку, когда на нее нажмут.
Я сделал часть для удаления строки рабочей, а также для исчезновения, но обе функции в сочетании не работают

Что я уже пробовал:

Вот мой код:
<tr>
    <td class="tg-98kr">Libby Folfax</td>
    <td class="tg-98kr">folfax2014@example.com</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">nickd@example.com</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;
}

1 Ответов

Рейтинг:
1

A_Griffin

Что ж... Я не знаю, почему вы оборачиваете свои кнопки в якорные теги или встроенные стили, но они не помогают, насколько это касается - во всяком случае, это работает для меня:

<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">folfax2014@example.com</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">nickd@example.com</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>

Member 13682154

Спасибо за помощь, но это все равно не работает для меня. На кнопке не должно быть ничего написано, кроме значка
Кроме того, когда я не навожу курсор на таблицу, она все еще показывает значение кнопки.
Он должен быть виден только тогда, когда я нависаю над этим рядом.

A_Griffin

Ну, это не так уж трудно заменить кнопку изображением - но что я могу сказать? Он работает для меня так, как вы хотите, в IE, Firefox и Chrome: он отображается только в каждой строке, когда эта строка наведена на нее.