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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Карта учета практики</title>

<!-- Excel -->
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

<style>

body{
    margin:0;
    padding:20px;
    background:#f3f0e8;
    font-family:"Times New Roman", serif;
}

.sheet{
    width:1400px;
    margin:auto;
    background:white;
    padding:30px;
    border:1px solid #999;
}

.center{
    text-align:center;
}

.yellow{
    background:#fff200;
}

.title{
    font-size:18px;
    font-weight:bold;
    margin:20px 0;
}

.top-box{
    border:1px solid black;
    padding:10px;
    margin-bottom:20px;
}

.practice-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.practice-name{
    width:500px;
    border:1px solid #000;
    background:#fff200;
    padding:5px;
    text-align:center;
}

.group{
    width:120px;
    border-bottom:1px solid black;
    text-align:center;
}

.month-box{
    width:200px;
    border:1px solid black;
    background:#fff200;
    height:30px;
}

.info-table{
    border-collapse:collapse;
    width:100%;
    margin-top:10px;
}

.info-table td,
.info-table th{
    border:1px solid #000;
    padding:3px;
    text-align:center;
    font-size:12px;
}

.student-col{
    width:250px;
}

.day-cell{
    width:24px;
    height:24px;
    cursor:pointer;
    user-select:none;
}

.day-cell:hover{
    background:#ddd;
}

.present{
    background:#8cff8c;
    font-weight:bold;
}

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

.footer{
    margin-top:30px;
    font-size:14px;
}

.line{
    display:inline-block;
    border-bottom:1px solid black;
    width:180px;
    margin:0 10px;
}

.buttons{
    margin-bottom:20px;
    display:flex;
    gap:10px;
}

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

.add-btn{
    background:#2196f3;
}

.excel-btn{
    background:#217346;
}

.clear-btn{
    background:#f44336;
}

</style>
</head>

<body>

<div class="buttons">

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

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

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

</div>

<div class="sheet" id="sheet">

    <div class="top-box center yellow">
        <b>ИП или ООО</b><br>
        <small>(профильная организация)</small>
    </div>

    <h2 class="center">
        ГБПОУ Колледж информационных технологий "ИТ.Москва"
    </h2>

    <div class="title center">
        КАРТА УЧЕТА ПРОХОЖДЕНИЯ ПРАКТИКИ
    </div>

    <div class="practice-row">

        <div class="practice-name" contenteditable="true">
            ПМ.01 Проектирование цифровых систем
        </div>

        <div>
            Группа:
            <span class="group" contenteditable="true">
                ИСП-42
            </span>
        </div>

    </div>

    <div style="display:flex; align-items:center; gap:10px; margin-bottom:20px;">

        <b>Месяц</b>

        <div class="month-box" contenteditable="true"></div>

    </div>

    <table class="info-table" id="attendanceTable">

        <thead>

        <tr>

            <th rowspan="2" class="student-col">
                Ф.И.О. обучающегося
            </th>

            <th colspan="31">
                Отметки о явках и неявках
            </th>

        </tr>

        <tr id="daysRow"></tr>

        </thead>

        <tbody>

        <tr>

            <td contenteditable="true">
                Иванов И.И.
            </td>

        </tr>

        </tbody>

    </table>

    <div class="footer">

        <div style="margin-top:40px;">

            Руководитель практики

            <span class="line"></span>

            <span class="line"></span>

        </div>

        <div style="margin-top:20px;">

            Руководитель от колледжа

            <span class="line"></span>

            <span class="line"></span>

        </div>

        <div class="center" style="margin-top:20px;">
            М.П.
        </div>

    </div>

</div>

<script>

const daysRow = document.getElementById("daysRow");


// Создаем дни

for(let i = 1; i <= 31; i++){

    const th = document.createElement("th");

    th.textContent = i;

    daysRow.appendChild(th);
}


// Создаем ячейки у первой строки

createCells(document.querySelector("#attendanceTable tbody tr"));


function createCells(row){

    for(let i = 1; i <= 31; i++){

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

        td.classList.add("day-cell");

        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 = document.querySelector("#attendanceTable tbody");

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

    tr.innerHTML = `
        <td contenteditable="true">
            Новый студент
        </td>
    `;

    tbody.appendChild(tr);

    createCells(tr);
}


// Очистить отметки

function clearMarks(){

    document.querySelectorAll(".day-cell").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>