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

<!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:1400px;
    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;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.info input{
    padding:6px;
}

.controls{
    margin-bottom:15px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

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

button:hover{
    opacity:0.9;
}

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

.clear-btn{
    background:#f44336;
    color:white;
}

.excel-btn{
    background:#217346;
    color:white;
}

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

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

th{
    background:#ececec;
}

.student-name{
    min-width:220px;
    text-align:left;
    padding-left:10px;
}

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

.day:hover{
    background:#ddd;
}

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

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

</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>

    <div class="controls">

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

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

        <button class="excel-btn" onclick="exportToExcel()">
            Сохранить в Excel
        </button>

    </div>

    <table id="attendanceTable">

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

        <tbody>

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

        </tbody>

    </table>

</div>

<!-- Библиотека Excel -->
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

<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 = "";

    });

}


// Экспорт в Excel

function exportToExcel(){

    const wb = XLSX.utils.book_new();

    const ws = XLSX.utils.table_to_sheet(
        document.getElementById("attendanceTable")
    );

    XLSX.utils.book_append_sheet(
        wb,
        ws,
        "Посещаемость"
    );

    XLSX.writeFile(
        wb,
        "Карта_учета_практики.xlsx"
    );

}

</script>

</body>
</html>