Добавление и удаление предметов из списка покупок — широко распространенная функция пользовательского интерфейса, которая зачастую создается с помощью фреймворка или даже нескольких. В этом уроке мы покажем, как создать эту функцию с помощью кода CSS и несложного кода JavaScript.

Основы

Основная структура таблицы находится в коде HTML и отображается без каких-либо элементов пользовательских функций, так что если код JavaScript не выполнится или будет каким-то образом заблокирован, пользователь все равно увидит список, но не сможет его отредактировать:

<table id="zen">
    <caption>AMD Zen Processors</caption>
    <thead>
        <tr><th>Name<th>Speed<th>Cores<th>Threads<th>Price
    <tbody>
        <tr><td>SR7<td>3.5Ghz<td>8<td>16<td>$499
        <tr><td>SR7<td>3.2GHz<td>8<td>16<td>$349
        <tr><td>SR5<td>3GHz<td>6<td>12<td>$250
</table>

Обратите внимание, здесь использован полностью допустимый код сокращения разметки HTML5 для сокращения примера, а также все характеристики и цены процессоров AMD приведены для примера и не соответствуют действительности.

У таблицы есть несколько связанных правил CSS:

#zen {
  border-collapse: collapse;
}
#zen tr td, #zen tr th {
    padding: .4rem;
}
#zen tr td:nth-of-type(3), #zen tr td:nth-of-type(4) {
  text-align: center;
}
#zen thead {
  border-bottom: 2px solid #333;
}
#zen tbody tr {
  border-bottom: 1px solid #ddd;
}

Добавление кнопок

Кнопки вставляются в тело связанной таблицы в конец каждой строки:

let procRows = zen.querySelectorAll("tbody tr");
for (let i = 0; i < procRows.length; i++) {
  procRows[i].innerHTML += '<td><button title="Remove"></td>';
}

В коде CSS эти кнопки используют фон в виде изображения мусорного ведра в формате SVG:

#zen button {
  width: 36px; height: 36px;
  background-image: url(trashcan.svg);
  margin-left: 1rem; border: none;
  background-position: center 4px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  opacity: .6;
  transition: .5s;
}

Также заданы свойства для изменения внешнего вида кнопки при наведении на нее указателя мыши:

tbody tr button:hover {
  opacity: .9;
  cursor: pointer;
}

Затем скрипт использует всплывание событий, ожидая нажатие в теле таблицы. Если это нажатие происходит на элемент кнопки, скрипт находит ячейку, в которой находится нужная кнопка, после этого он находит строку таблицы, в которую вложен этот элемент, и применяет к ней класс, а также убирает кнопку:

zen.querySelector("tbody").addEventListener("click", function(e) {
    if (e.target.nodeName == "BUTTON") {
        let cell = e.target.parentNode;
        cell.parentNode.classList.add("hidden");
        e.target.remove();
    }
})

Применяем анимации

Нельзя анимировать высоту элемента с помощью CSS, но высота ячейки таблицы, содержащей текст и, соответственно, высота всей строки вычисляется всего из двух величин:

1. Размер шрифта текста
2. Внутренние отступы ячеек таблицы

И оба этих свойства можно анимировать:

@keyframes hide {
  to {
    font-size: 0;
    padding: 0;
  }
}

Следующая последовательность анимации вызывается, когда класс .hidden применяется к строке таблицы:

tr.hidden td {
  animation: hide 1s 1s forwards;
}
tr.hidden {
  opacity: 0;
  border-bottom: none;
}

Эта анимация выполняется в течение 1 секунды после задержки на 1 секунду.

Можно анимировать плавное исчезновение строк таблицы, добавив им переход:

#zen tr { transition: .8s opacity; }

В результате получается вот такая таблица:

Заключение

Скрипт и код CSS вместе создают простую анимацию удаления для выбранной строки таблицы. Если Вам нужно полностью удалить строку из дерева документа, а не только спрятать ее, это можно сделать после завершения анимации.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание более плотных абзацев с использованием переноса слов CSS3
• Использование горизонтального разделителя
• Использование селекторов last-child и last-of-type в CSS