создание таблицы для профилей в js

// Скрываем все окна, кроме главного, при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
  var windows = document.getElementsByClassName("window");
  for (var i = 0; i < windows.length; i++) {
    if (windows[i].id !== 'window1') {
      windows[i].style.display = 'none';
    }
  }
});

// Функция для переключения между окнами
function showWindow(windowNumber) {
  var windows = document.getElementsByClassName("window");
  for (var i = 0; i < windows.length; i++) {
    windows[i].style.display = "none";
  }
  document.getElementById("window" + windowNumber).style.display = "block";
}
// Функция для отображения окна профиля
function showProfileWindow() {
  console.log('Функция showProfileWindow() вызвана'); // Проверка вызова функции
  var iinInput = document.createElement('input');
  iinInput.setAttribute('type', 'text');
  iinInput.setAttribute('placeholder', 'Введите ИИН');
  iinInput.setAttribute('id', 'iinInput');

  var submitButton = document.createElement('button');
  submitButton.textContent = 'Открыть профиль';
  submitButton.addEventListener('click', function() {
    var iin = iinInput.value;
    showProfileData(iin);
  });

  var windowElement = document.getElementById('window4');
  windowElement.innerHTML = '';
  windowElement.style.textAlign = 'center'; // Добавляем выравнивание по центру
  windowElement.style.paddingTop = '50px'; // Добавляем верхний отступ
  windowElement.appendChild(iinInput);
  windowElement.appendChild(document.createElement('br')); // Добавляем перенос строки
  windowElement.appendChild(submitButton);

  // Переключаем страницу к окну профиля
  showWindow(4);
}

// Функция для отображения данных профиля
function showProfileData(iin) {
    var windowElement = document.getElementById('window4');
    windowElement.innerHTML = '';

    var profileName = '';
    var profileInfo = '';
    var avatarPath = ''; // Путь к аватару
    var birthDate = ''; // Дата рождения

    switch(iin) {
        case '781224402728':
            profileName = 'Тажиева Рысты Нарбаевна';
            profileInfo = 'Преподаватель';
            avatarPath = 'https://i.imgur.com/aKI5rJY.png';
            birthDate = '29-01-1972';
            break;
        case '820731499517':
            profileName = 'Тасжурекова Жазира Кудайбергенова';
            profileInfo = 'Преподаватель';
            avatarPath = 'https://i.imgur.com/7aP32su.png';
            birthDate = '31-07-1982';
            break;
        case '720129401918':
            profileName = 'Туреханова Гулжанар Ильясовна';
            profileInfo = 'Преподаватель';
            avatarPath = 'https://i.imgur.com/aKI5rJY.png';
            birthDate = '24-12-1978';
            break;
        default:
            alert('Неверный ИИН. Пожалуйста, введите корректный ИИН.');
            return; // Возвращаемся из функции, если введен неверный ИИН
    }

    // Создаем элемент для аватара
    var avatarImg = document.createElement('img');
    avatarImg.setAttribute('src', avatarPath);
    avatarImg.style.width = '150px'; // Размеры аватара
    avatarImg.style.height = '150px';
    avatarImg.style.borderRadius = '50%'; // Скругление углов для создания круглого аватара
    avatarImg.style.margin = '0 auto'; // Центрирование по горизонтали

    // Создаем контейнер для аватара
    var avatarContainer = document.createElement('div');
    avatarContainer.appendChild(avatarImg);

    // Добавляем таблицу с информацией на страницу
    windowElement.appendChild(avatarContainer);
    windowElement.appendChild(createProfileTable(profileName, profileInfo, birthDate));

    windowElement.style.display = 'block';
}


function createProfileTable(profileName, profileInfo, birthDate) {
    // Создаем таблицу
    var table = document.createElement('table');
    table.style.margin = '20px auto'; // Центрируем таблицу

    // Создаем заголовок таблицы
    var headerRow = table.insertRow();
    var headerCell1 = headerRow.insertCell();
    var headerCell2 = headerRow.insertCell();
    headerCell1.textContent = 'Параметр';
    headerCell2.textContent = 'Значение';

    // Добавляем строки с информацией о профиле
    addRowToTable(table, 'Имя', profileName);
    addRowToTable(table, 'Информация', profileInfo);
    addRowToTable(table, 'Дата рождения', birthDate);

    return table;
}

// Функция для добавления строки в таблицу
function addRowToTable(table, label, value) {
    var row = table.insertRow();
    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    cell1.textContent = label;
    cell2.textContent = value;
}

<!-- Контейнеры для окон -->
<div id="window1" class="window">
  <!-- Содержимое окна 1 -->
  <h2>Окно 1</h2>
  <p>Содержимое первого окна</p>
</div>

<div id="window2" class="window">
  <!-- Содержимое окна 2 -->
  <h2>Окно 2</h2>
  <p>Содержимое второго окна</p>
</div>

<div id="window3" class="window">
    <div id="qr-reader"></div>
</div>

<div id="window4" class="window">

</div>

<!-- Кнопки переключения -->
<div id="footer">
  <button class="icon-button" onclick="showWindow(1)">
    <img src="img/ig_Glav.png" alt="Окно 1">
  </button>
  <button class="icon-button" onclick="showWindow(2)">
    <img src="img/uchoba.png" alt="Окно 2">
  </button>
  <button class="icon-button" onclick="scanQRCode()">
    <img src="img/qr.png" alt="Окно 3">
  </button>
  <button class="icon-button" onclick="showProfileWindow()">
    <img src="img/prof_ic.png" alt="Профиль">
  </button>
</div>