Скрипт для удаления строк в таблице по клику

Скрипт для удаления строк в таблице по клику

От автора: добавление и удаление товаров из корзины – довольно распространенный UI шаблон. Часто он создается с помощью фреймворка (или двух, или трех…). На этой неделе я понял, что этот шаблон можно написать на CSS и чистом JavaScript.

Основа

Фундаментальная структура таблицы представлена в HTML и отображается без каких-либо UI элементов. То есть если JS не сработает или будет заблокирован, пользователь будет видеть список, но не сможет его редактировать.

Обратите внимание на то, что я использую полностью валидные HTML5 сокращения для экономии пространства в примере. Кроме того, спецификации и цены на новое поколение процессоров AMD сейчас неизвестны. С таблицей ассоциируется несколько CSS правил:

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

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

В CSS у кнопок прописан фон из SVG изображения мусорной корзины:

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

Скрипт использует принцип всплытия событий для отслеживания клика в теге tbody таблицы. Если клик был произведен по тегу button, скрипт найдет ячейку, в которой лежит кнопка, затем найдет строку, в которой лежит ячейка, и присвоит ей класс. После этого кнопка удаляется.

Добавляем плавности

CSS не может анимировать высоту элемента. Однако высота td, хранящая текстовый контент, вычисляется по двум параметрам:

font-size текста;

padding ячейки таблицы.

… и мы можем анимировать оба свойства:

Эта последовательность анимаций вызывается при добавлении строке таблицы класса hide:

Анимация длится 1 секунду с задержкой в 1 секунду. Можно плавно прятать строки таблицы, добавив свойство transition к ним:

Заключение

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

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: