1

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

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

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

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

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

введите сюда описание изображения

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

введите сюда описание изображения

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

введите сюда описание изображения

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

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

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

4
  • Посмотрите такой готовый вариант. Если даже не его использовать, то как минимум, там можно посмотреть принцип работы.
    – Deonis
    24 дек 2022 в 10:42
  • Не совсем то что мне нужно. Однако мне предложили вариант сделать при помощи создания таблицы кастомных чекбоксов
    – mega asda
    24 дек 2022 в 10:56
  • 1
    Верстаете таблицу. При нажатии на ячейку навешиваете ей определенный атрибут, например класс. А после пробегаетесь forEach по всем элементам где имеется этот атрибут и получаете значения
    – KordDEM
    24 дек 2022 в 11:01
  • 1
    @Lcashe, можно и так, как вам предложили, но KordDEM посоветовал более рациональный вариант с классом, т.к. он будет служить не только маркером отмеченной ячейки для сбора данных, но и классом со стилями для подсветки выбранных.
    – Deonis
    24 дек 2022 в 12:26

1 ответ 1

2

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

    // Запрашиваем размеры(если надо)
    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>

1
  • Именно то что нужно
    – mega asda
    24 дек 2022 в 20:50

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.