(Решено) На странице должна быть таблица с расписанием занятий, на основе JSON-данных.Каждая строка таблицы должна содержать информацию о занятии, а именно:-…

Вопрос от пользователя:

На странице должна быть таблица с расписанием занятий, на основе JSON-данных.
Каждая строка таблицы должна содержать информацию о занятии, а именно:
– название занятия
– время проведения занятия
– максимальное количество участников
– текущее количество участников
– кнопка “записаться”
– кнопка “отменить запись”

Ваш вопрос в очереди на обработку, пожалуйста подождите.

Подождите!

Не закрывайте страницу. Нейросеть пишет ответ. Он появится тут.

Этот ответ написан нейросетью.

Внимание! Ответы искусственного интеллекта могут быть неточными. Не полагайтесь на них в медицине, юриспруденции, финансах и вопросах безопасности. При принятии важных решений всегда консультируйтесь с профильными специалистами.
Администрация сайта не несет ответственности за любой автоматически созданный контент. Если вы обнаружили ошибки, пожалуйста, сообщите об этом через кнопку "репорт" внизу ответа и мы примем соответствующие меры. Спасибо за вашу помощь в улучшении качества нашего сервиса.

Задать новый вопрос

Ответ нейросети:

Для создания страницы с расписанием занятий на основе JSON-данных и с указанными элементами, необходимо использовать языки HTML, CSS и JavaScript. Давайте разберем шаги, которые понадобятся для реализации данной задачи.

### Шаг 1: Подготовка JSON-данных
Сначала создадим JSON-файл, который будет содержать информацию о занятиях. Пример структуры файла:


[

    {

        "название": "Занятие 1",

        "время": "10:00",

        "макс_участников": 20,

        "текущие_участники": 15

    },

    {

        "название": "Занятие 2",

        "время": "14:00",

        "макс_участников": 15,

        "текущие_участники": 10

    },

    ...

]

### Шаг 2: Создание HTML-разметки
Создадим HTML-разметку страницы с таблицей расписания:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Расписание занятий</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <table id="schedule">

        <tr>

            <th>Название</th>

            <th>Время</th>

            <th>Макс. участников</th>

            <th>Текущие участники</th>

            <th></th>

            <th></th>

        </tr>

    </table>

    <script src="script.js"></script>

</body>

</html>

### Шаг 3: Стилизация с помощью CSS
Создадим CSS-файл для стилизации таблицы:


table {

    width: 100%;

    border-collapse: collapse;

}



th, td {

    border: 1px solid black;

    padding: 8px;

}



button {

    padding: 6px 12px;

}

### Шаг 4: Динамическое заполнение таблицы
В файле `script.js` напишем скрипт для загрузки JSON-данных и их отображения в таблице:


fetch('schedule.json')

    .then(response => response.json())

    .then(data => {

        const scheduleTable = document.getElementById('schedule');



        data.forEach(item => {

            const row = scheduleTable.insertRow();



            for (const key in item) {

                if (key !== "текущие_участники") {

                    const cell = row.insertCell();

                    cell.textContent = item[key];

                } else {

                    const currentCell = row.insertCell();

                    currentCell.textContent = item[key];



                    const signUpCell = row.insertCell();

                    const signUpButton = document.createElement('button');

                    signUpButton.textContent = 'Записаться';

                    signUpCell.appendChild(signUpButton);



                    const cancelCell = row.insertCell();

                    const cancelButton = document.createElement('button');

                    cancelButton.textContent = 'Отменить запись';

                    cancelCell.appendChild(cancelButton);

                }

            }

        });

    })

    .catch(error => console.error('Ошибка загрузки данных' + error));

### Итог
После выполнения этих шагов, на странице будет создана таблица с расписанием занятий, данные в которой будут загружены из JSON-файла. Каждая строка таблицы будет содержать информацию о занятии (название, время, максимальное количество участников, текущее количество участников) и кнопки "Записаться" и "Отменить запись". Все элементы таблицы будут стилизованы с помощью CSS.

Таким образом, вы сможете создать динамическую страницу с расписанием занятий на основе JSON-данных, позволяющую пользователям просматривать расписание и записываться на занятия.

Понравилось? Поделись :)

⚠️Зарепортить пост!