Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карта учета практики</title>

<style>
    body{
        font-family: Arial, sans-serif;
        background:#f5f1e8;
        margin:0;
        padding:20px;
    }

    .container{
        max-width:1200px;
        margin:auto;
        background:white;
        padding:20px;
        border-radius:12px;
        box-shadow:0 0 10px rgba(0,0,0,0.1);
    }

    h1{
        text-align:center;
        margin-bottom:20px;
    }

    .info{
        display:flex;
        justify-content:space-between;
        margin-bottom:20px;
        flex-wrap:wrap;
        gap:10px;
    }

    .info input{
        padding:5px;
    }

    table{
        width:100%;
        border-collapse:collapse;
        overflow-x:auto;
    }

    th, td{
        border:1px solid #999;
        text-align:center;
        padding:8px;
        font-size:14px;
    }

    th{
        background:#ececec;
    }

    .student-name{
        min-width:200px;
        text-align:left;
    }

    .day{
        cursor:pointer;
        transition:0.2s;
        user-select:none;
    }

    .day:hover{
        background:#ddd;
    }

    .present{
        background:#9be79b;
        font-weight:bold;
    }

    .absent{
        background:#ffb3b3;
        font-weight:bold;
    }

    .controls{
        margin-top:20px;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
    }

    button{
        padding:10px 15px;
        border:none;
        border-radius:6px;
        cursor:pointer;
        font-size:14px;
    }

    .add-btn{
        background:#4caf50;
        color:white;
    }

    .clear-btn{
        background:#f44336;
        color:white;
    }
</style>
</head>
<body>

<div class="container">

    <h1>КАРТА УЧЕТА ПРОХОЖДЕНИЯ ПРАКТИКИ</h1>

    <div class="info">
        <div>
            Группа:
            <input type="text" value="ИСП-42">
        </div>

        <div>
            Практика:
            <input type="text" value="Производственная">
        </div>

        <div>
            Период:
            <input type="date">
            —
            <input type="date">
        </div>
    </div>

    <table id="attendanceTable">
        <thead>
            <tr>
                <th>№</th>
                <th class="student-name">Ф.И.О.</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td class="student-name">Иванов И.И.</td>
            </tr>
        </tbody>
    </table>

    <div class="controls">
        <button class="add-btn" onclick="addStudent()">
            Добавить студента
        </button>

        <button class="clear-btn" onclick="clearMarks()">
            Очистить отметки
        </button>
    </div>

</div>

<script>
    const daysInMonth = 31;
    const table = document.getElementById('attendanceTable');

    // Создание заголовков дней
    const headerRow = table.querySelector('thead tr');

    for(let day = 1; day <= daysInMonth; day++){
        const th = document.createElement('th');
        th.textContent = day;
        headerRow.appendChild(th);
    }

    // Создаем ячейки для первой строки
    createDayCells(table.querySelector('tbody tr'));

    function createDayCells(row){

        for(let day = 1; day <= daysInMonth; day++){

            const td = document.createElement('td');

            td.classList.add('day');

            td.addEventListener('click', () => {

                // цикл:
                // пусто -> присутствует -> отсутствует -> пусто

                if(!td.classList.contains('present') &&
                   !td.classList.contains('absent')){

                    td.classList.add('present');
                    td.textContent = "✓";

                }else if(td.classList.contains('present')){

                    td.classList.remove('present');
                    td.classList.add('absent');
                    td.textContent = "Н";

                }else{

                    td.classList.remove('absent');
                    td.textContent = "";
                }
            });

            row.appendChild(td);
        }
    }

    // Добавление студента
    function addStudent(){

        const tbody = table.querySelector('tbody');

        const rowCount = tbody.rows.length + 1;

        const tr = document.createElement('tr');

        tr.innerHTML = `
            <td>${rowCount}</td>
            <td class="student-name" contenteditable="true">
                Новый студент
            </td>
        `;

        tbody.appendChild(tr);

        createDayCells(tr);
    }

    // Очистка
    function clearMarks(){

        document.querySelectorAll('.day').forEach(cell => {

            cell.classList.remove('present');
            cell.classList.remove('absent');
            cell.textContent = "";
        });
    }
</script>

</body>
</html>