html/lab5/task7/script.js - master - ChizhenkoM/web-static-labs

html/lab5/task7/script.js
69 строк2 KB
ChizhenkoM
lab8
17 апр 2026, 08:29
17 апр 2026, 08:2972323f6
'use strict';

function createTable() {
    const rows = parseInt(document.getElementById('rows').value);
    const cols = parseInt(document.getElementById('cols').value);
    const container = document.getElementById('tableContainer');

    if (rows < 1 || rows > 20 || cols < 1 || cols > 20) {
        alert('Значения должны быть от 1 до 20');
        return;
    }

    const table = document.createElement('table');
    
    // Заголовок
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    headerRow.appendChild(document.createElement('th'));
    for (let j = 1; j <= cols; j++) {
        const th = document.createElement('th');
        th.textContent = j;
        headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // Тело таблицы
    const tbody = document.createElement('tbody');
    for (let i = 1; i <= rows; i++) {
        const tr = document.createElement('tr');
        const th = document.createElement('th');
        th.textContent = i;
        tr.appendChild(th);
        
        for (let j = 1; j <= cols; j++) {
            const td = document.createElement('td');
            const result = i * j;
            td.textContent = result;
            td.addEventListener('click', () => showModal(i, j, result));
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    table.appendChild(tbody);
    
    container.innerHTML = '';
    container.appendChild(table);
}

function showModal(row, col, value) {
    const modal = document.getElementById('modal');
    const info = document.getElementById('modalInfo');
    info.textContent = `Строка: ${row} | Столбец: ${col} | Результат: ${value}`;
    modal.classList.remove('hidden');
}

document.getElementById('createBtn').addEventListener('click', createTable);
document.getElementById('closeModal').addEventListener('click', () => {
    document.getElementById('modal').classList.add('hidden');
});

window.addEventListener('click', (e) => {
    const modal = document.getElementById('modal');
    if (e.target === modal) {
        modal.classList.add('hidden');
    }
});

createTable();