Codice della tabella Gestione Dati

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Tabella Didattica con Media</title>
<style>
body { font-family: sans-serif; padding: 20px; background: #f9f9f9; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #2c3e50; color: white; }
.controls { margin-bottom: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
button { padding: 8px 15px; cursor: pointer; border: none; border-radius: 4px; color: white; margin-right: 5px; }
.btn-add { background: #27ae60; }
.btn-del { background: #e74c3c; }
.btn-csv { background: #f39c12; }
.btn-home { background: #3498db; margin-bottom: 10px; }
.stats { margin-top: 15px; font-weight: bold; font-size: 1.2em; color: #2c3e50; padding: 10px; background: #ecf0f1; border-radius: 5px; display: inline-block; }
</style>
</head>
<body>

<a href="index.html" style="text-decoration:none;"><button class="btn-home">← Torna alla Home</button></a>

<h2>Gestione Dati Didattici</h2>

<div class="controls">
<input type="text" id="inputData" placeholder="Data (es. 12/10)">
<input type="text" id="inputNome" placeholder="Nome Studente">
<input type="number" id="inputVoto" placeholder="Voto (numero)" step="0.5">
<button class="btn-add" onclick="addRow()">Aggiungi Riga</button>
<button class="btn-csv" onclick="downloadCSV()">Scarica CSV</button>
<button class="btn-del" onclick="clearTable()">Svuota Tutto</button>
</div>

<div class="stats" id="boxMedia">Media Voti: -</div>

<table id="myTable">
<thead>
<tr>
<th>Data</th>
<th>Nome</th>
<th>Voto</th>
<th>Azione</th>
</tr>
</thead>
<tbody></tbody>
</table>

<script>
function updateMedia() {
const rows = document.querySelectorAll("#myTable tbody tr");
let somma = 0;
let conteggio = 0;

rows.forEach(row => {
const voto = parseFloat(row.querySelectorAll("td")[2].innerText);
if (!isNaN(voto)) {
somma += voto;
conteggio++;
}
});

const media = conteggio > 0 ? (somma / conteggio).toFixed(2) : "-";
document.getElementById('boxMedia').innerText = `Media Voti: ${media}`;
}

function addRow() {
const dataVal = document.getElementById('inputData').value;
const nomeVal = document.getElementById('inputNome').value;
const votoVal = document.getElementById('inputVoto').value;

if(!dataVal || !nomeVal || !votoVal) {
return alert("Per favore, compila tutti i campi!");
}

const table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();

newRow.innerHTML = `
<td>${dataVal}</td>
<td>${nomeVal}</td>
<td>${votoVal}</td>
<td><button class="btn-del" onclick="this.parentElement.parentElement.remove(); updateMedia();">Elimina</button></td>
`;

// Pulizia e aggiornamento
document.getElementById('inputData').value = '';
document.getElementById('inputNome').value = '';
document.getElementById('inputVoto').value = '';
updateMedia();
}

function clearTable() {
if(confirm("Svuotare tutto?")) {
document.getElementById('myTable').getElementsByTagName('tbody')[0].innerHTML = "";
updateMedia();
}
}

function downloadCSV() {
let csv = "sep=;\nData;Nome;Voto\n";
const rows = document.querySelectorAll("#myTable tbody tr");
if(rows.length === 0) return alert("Tabella vuota!");

rows.forEach(row => {
const cols = row.querySelectorAll("td");
csv += `${cols[0].innerText};${cols[1].innerText};${cols[2].innerText}\n`;
});

const blob = new Blob(["\ufeff" + csv], { type: 'text/csv;charset=utf-8;' });
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', 'dati_didattici.csv');
a.click();
}
</script>
</body>
</html>