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

32

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

Основа

Фундаментальна структура представлена в таблиці HTML і відображається без будь-яких UI елементів. Тобто якщо JS не спрацює, чи буде заблокований, користувач буде бачити список, але не зможе його редагувати.

AMD Zen Processors

Name

Speed

Cores

Threads

Price

SR7

3.5 Ghz

8

16

$499

SR7

3.2 GHz

8

16

$349

SR5

3GHz

6

12

$250

Зверніть увагу на те, що я використовую повністю валідні 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.innerHTML += ‘

‘;
}

В 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;
}

Також прописано стан :hover, яке змінює вигляд кнопки при наведенні на неї курсора миші:

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

Скрипт використовує принцип спливання подій для відстеження кліка в тезі tbody таблиці. Якщо клік був проведений по тегу button, скрипт знайде клітинку, в якій лежить кнопка, потім знайде рядок, в якій лежить осередок, і привласнить їй клас. Після цього кнопка видаляється.

zen.querySelector(«tbody»).addEventListener. («click», function(e) {
if (e.target.вузла == «BUTTON») {
let cell = e.target.parentNode;
cell.parentNode.classList.add(«hidden»);
e.target.remove();
}
})

Додаємо плавності

CSS не може анімувати висоту елемента. Проте висота td, зберігає текстовий контент, обчислюється за двома параметрами:

font-size тексту;

padding клітинки таблиці.

… і ми можемо анімувати обидва властивості:

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

Ця послідовність анімацій викликається при додаванні рядку таблиці класу hide:

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

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

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

Висновок

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