Назад

Універсальний генератор таблиць

Створюйте таблиці з різними варіантами розфарбування: діагоналі, четверті або їх комбінації

Налаштування таблиці

Виберіть тип розфарбування:

Кольори для четвертей між діагоналями

Верхня чверть:
Права чверть:
Нижня чверть:
Ліва чверть:
Головна діагональ:
Побічна діагональ:

Кольори для головної діагоналі

Головна діагональ:
Вище головної діагоналі:
Нижче головної діагоналі:

Кольори для побічної діагоналі

Побічна діагональ:
Вище побічної діагоналі:
Нижче побічної діагоналі:

Кольори для обох діагоналей

Перетин діагоналей:
Головна діагональ:
Побічна діагональ:
Решта таблиці:

Інструкція

Типи розфарбування:

  • Четверті між діагоналями - розфарбування чотирьох областей між діагоналями
  • Головна діагональ - розфарбування відносно лінії від лівого верхнього до правого нижнього кута
  • Побічна діагональ - розфарбування відносно лінії від правого верхнього до лівого нижнього кута
  • Обидві діагоналі - виділення обох діагоналей та їх перетину

Принципи розподілу для четвертей між діагоналями:

  • Верхня чверть: i < j та i + j < n-1
  • Права чверть: i < j та i + j > n-1
  • Нижня чверть: i > j та i + j > n-1
  • Ліва чверть: i > j та i + j < n-1
  • Головна діагональ: i = j
  • Побічна діагональ: i + j = n-1

Результат:

Методика програмування

Основні функції генератора таблиць

Нижче наведено код основних функцій, які використовуються в цьому генераторі таблиць.

1. Функція створення таблиці

function createTable(size) {
    const table = document.createElement('table');
    
    for (let i = 0; i < size; i++) {
        const row = document.createElement('tr');
        
        for (let j = 0; j < size; j++) {
            const cell = document.createElement('td');
            cell.textContent = `${i+1},${j+1}`;
            row.appendChild(cell);
        }
        
        table.appendChild(row);
    }
    
    return table;
}

2. Розфарбування четвертей між діагоналями

function colorByQuartersBetweenDiagonals(table) {
    const rows = table.getElementsByTagName('tr');
    const size = rows.length;
    
    for (let i = 0; i < rows.length; i++) {
        const cells = rows[i].getElementsByTagName('td');
        
        for (let j = 0; j < cells.length; j++) {
            const onMainDiagonal = (i === j);
            const onSecondaryDiagonal = (i + j === size - 1);
            
            if (onMainDiagonal) {
                // Головна діагональ
                cells[j].style.backgroundColor = mainDiagonalColor;
                cells[j].style.color = getContrastColor(mainDiagonalColor);
            } else if (onSecondaryDiagonal) {
                // Побічна діагональ
                cells[j].style.backgroundColor = secondaryDiagonalColor;
                cells[j].style.color = getContrastColor(secondaryDiagonalColor);
            } else if (i < j && i + j < size - 1) {
                // Верхня чверть
                cells[j].style.backgroundColor = topQuarterColor;
                cells[j].style.color = getContrastColor(topQuarterColor);
            } else if (i < j && i + j > size - 1) {
                // Права чверть
                cells[j].style.backgroundColor = rightQuarterColor;
                cells[j].style.color = getContrastColor(rightQuarterColor);
            } else if (i > j && i + j > size - 1) {
                // Нижня чверть
                cells[j].style.backgroundColor = bottomQuarterColor;
                cells[j].style.color = getContrastColor(bottomQuarterColor);
            } else if (i > j && i + j < size - 1) {
                // Ліва чверть
                cells[j].style.backgroundColor = leftQuarterColor;
                cells[j].style.color = getContrastColor(leftQuarterColor);
            }
        }
    }
}

Назад