html/lab5/task7/script.js - main - maxxon/web-static-labs

html/lab5/task7/script.js
68 строк3 KB
Dasha_10
изменения
19 окт 2025, 18:51
19 окт 2025, 18:51b6adcb0
document.addEventListener('DOMContentLoaded', function() {
    const rowsInput = document.getElementById('rows');
    const colsInput = document.getElementById('cols');
    const createTableButton = document.getElementById('createTable');
    const tableContainer = document.getElementById('tableContainer');
    const modal = document.getElementById('modal');
    const modalText = document.getElementById('modal-text');
    const closeButton = document.querySelector('.close');

    createTableButton.addEventListener('click', function() {
        const rows = parseInt(rowsInput.value);
        const cols = parseInt(colsInput.value);

        if (isNaN(rows) || isNaN(cols) || rows < 1 || rows > 20 || cols < 1 || cols > 20) {
            alert('Пожалуйста, введите числа от 1 до 20.');
            return;
        }

        // Создаем таблицу
        const table = document.createElement('table');

        for (let i = 1; i <= rows; i++) {
            const row = table.insertRow();
            for (let j = 1; j <= cols; j++) {
                const cell = row.insertCell();
                const result = i * j;
                cell.textContent = result;
                cell.dataset.row = i;
                cell.dataset.col = j;
                cell.dataset.result = result;

                // Обработчик наведения
                cell.addEventListener('mouseover', function() {
                    this.classList.add('highlighted');
                });

                cell.addEventListener('mouseout', function() {
                    this.classList.remove('highlighted');
                });

                // Обработчик клика
                cell.addEventListener('click', function() {
                    const row = this.dataset.row;
                    const col = this.dataset.col;
                    const result = this.dataset.result;

                    modalText.textContent = `Строка: ${row}, Столбец: ${col}, Результат: ${result}`;
                    modal.style.display = "block";
                });
            }
        }

        // Очищаем предыдущую таблицу (если есть)
        tableContainer.innerHTML = '';
        tableContainer.appendChild(table);
    });

    // Закрытие модального окна
    closeButton.addEventListener('click', function() {
        modal.style.display = "none";
    });

    window.addEventListener('click', function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    });
});