В предыдущих уроках мы с вами научились активировать элементы. Давайте теперь сделаем так, чтобы можно было активировать ограниченное количество элементов.
Пусть, к примеру, у нас есть таблица #table
и мы разрешаем активировать в ней не более
3-х элементов. Для этого по клику
на любую ячейку будем проверять, сколько
уже ячеек активировано. Если меньше трех
- то будем разрешать активацию, а в противном
случае ничего не будем делать:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.addEventListener('click', function() {
let activeTds = document.querySelectorAll('#table td.active');
if (activeTds.length < 3) {
this.classList.add('active');
}
});
}
Объясните, как работает приведенный мною код.
Сделайте так, чтобы в одном ряду таблице
можно было активировать не более 5-ти
ячеек.
Сделайте так, чтобы для активированной ячейки нельзя было активировать ее соседей слева и справа.
Сделайте так, чтобы в для активированной ячейки нельзя было активировать ее соседей сверху и снизу.