Создать таблицу с возможностью выбора множества значений

Question

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

Считаю что <select> или dropdown не подходят, т к мне нужно именно в виде таблицы

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

Вот пример того что мне нужно получить:

Начальная таблица:

Одно выделение ячейки в таблице:

Множество выделений ячеек в таблице:

И после этого должен вывестись массив

res = ['A', 'G', 'N']

То есть массив с выбранными значениями

Answer 1

Вот пример как можно сделать кликабельную таблицу с записью выбранных значений.

    // Запрашиваем размеры(если надо)
    const rows = prompt('Сколько линий?');
    const cols = prompt('Сколько столбцов?');
    let clicks = []; // Храним выбранные значения
    let numbers = 0; // Это выводимые значения. Для примера использую цифры
    const elem = document.getElementById('pole'); // Берем родительский элемент
    for (let i = 0; i < rows; i++) { // Для каждой строки
        const tr = document.createElement('tr'); // Создаем строку таблицы
        for (let j = 0; j < cols; j++) { // Для каждого столбца
            const td = document.createElement('td'); // Создаем столбец
            const pos = numbers++; // Сохраняем значение 
            td.innerText = pos; // Записываем значение в ячейку
            td.classList.add('sqr'); // присваиваем класс

            td.addEventListener('click', () => { // Создаем событие нажатия на кнопку
                // Если значения нет, добавляем, иначе удаляем из массива
                clicks.indexOf(pos) === -1 ? clicks.push(pos) : clicks = clicks.filter(it => it !== pos);
                td.classList.toggle('selected'); // меняем класс
                console.log(clicks); // Вывод значений из массива(для демонстрации)
            });
            tr.appendChild(td); // Добавляем ячейку в строку
        }
        elem.appendChild(tr); // Добавляем строку в таблицу
    }

.sqr {
        width: 50px;
        height: 50px;
    }

    .sqr:hover {
        background-color: aqua;
    }

    .selected {
        background-color: chartreuse;
    }
    table {
        display: block;
        border-spacing: 0;
    }

    table td {
        border: 1px solid;
    }

<table id="pole"></table>

БЛОГ НА HUSL

Создать таблицу с возможностью выбора множества значений

Ответы (1 шт):