html/lab5/task4/script.js - main - aska/web-static-labs

html/lab5/task4/script.js
86 строк4 KB
unknown
лабы 1 4 5
14 ноя 2025, 09:16
14 ноя 2025, 09:16b757c12
document.addEventListener('DOMContentLoaded', function() {
    const lastNameInput = document.getElementById('lastName');
    const firstNameInput = document.getElementById('firstName');
    const ageInput = document.getElementById('age');
    const phoneInput = document.getElementById('phone');
    const addContactButton = document.getElementById('addContactButton');

    const filterLastNameInput = document.getElementById('filterLastName');
    const filterFirstNameInput = document.getElementById('filterFirstName');
    const filterAgeInput = document.getElementById('filterAge');
    const filterPhoneInput = document.getElementById('filterPhone');
    const filterButton = document.getElementById('filterButton');

    const contactTableBody = document.getElementById('contactTable').querySelector('tbody');
    let contacts = []; // Массив для хранения контактов

    // Функция для добавления контакта в таблицу
    function addContactToTable(contact) {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${contact.lastName}</td>
            <td>${contact.firstName}</td>
            <td>${contact.age}</td>
            <td>${contact.phone}</td>
        `;
        contactTableBody.appendChild(row);
    }

    // Функция для добавления контакта в массив и таблицу
    function addContact(lastName, firstName, age, phone) {
        const contact = {
            lastName: lastName,
            firstName: firstName,
            age: age,
            phone: phone
        };
        contacts.push(contact);
        addContactToTable(contact);
    }

    // Обработчик для кнопки "Добавить"
    addContactButton.addEventListener('click', function() {
        const lastName = lastNameInput.value.trim();
        const firstName = firstNameInput.value.trim();
        const age = ageInput.value.trim();
        const phone = phoneInput.value.trim();

        if (lastName && firstName && age && phone) {
            addContact(lastName, firstName, age, phone);
            // Очищаем поля ввода
            lastNameInput.value = '';
            firstNameInput.value = '';
            ageInput.value = '';
            phoneInput.value = '';
        } else {
            alert('Пожалуйста, заполните все поля!');
        }
    });

    // Функция для фильтрации контактов
    function filterContacts() {
        const filterLastName = filterLastNameInput.value.trim().toLowerCase();
        const filterFirstName = filterFirstNameInput.value.trim().toLowerCase();
        const filterAge = filterAgeInput.value.trim().toLowerCase();
        const filterPhone = filterPhoneInput.value.trim().toLowerCase();

        // Очищаем таблицу
        contactTableBody.innerHTML = '';

        // Фильтруем контакты
        const filteredContacts = contacts.filter(contact => {
            return (
                contact.lastName.toLowerCase().includes(filterLastName) &&
                contact.firstName.toLowerCase().includes(filterFirstName) &&
                contact.age.toLowerCase().includes(filterAge) &&
                contact.phone.toLowerCase().includes(filterPhone)
            );
        });

        // Добавляем отфильтрованные контакты в таблицу
        filteredContacts.forEach(addContactToTable);
    }

    // Обработчик для кнопки "Фильтр"
    filterButton.addEventListener('click', filterContacts);
});