<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau HTML</title>
<style>
.table-container {
width: 100%;
overflow-x: auto;
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
table-layout: auto;
}
th, td {
padding: 5px;
text-align: center;
border: 1px solid black;
box-sizing: border-box;
}
.fixed-column {
position: sticky;
left: 0;
background: white;
z-index: 2;
border-left: 2px solid black;
border-right: 1px solid black;
padding-left: 10px;
padding-right: 10px;
width: 222px;
min-width: 222px;
}
th.fixed-column {
top: 0;
z-index: 3;
}
td:first-child {
border-left: 2px solid black;
}
.active-cell {
background-color: green;
color: white;
}
.total-column {
background-color: #f0f0f0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<tr>
<th class="fixed-column">Nom</th>
<th>Total</th>
<?php
$start_date = new DateTime("2025-01-01");
$end_date = new DateTime("2025-12-31");
while ($start_date <= $end_date) {
echo "<th>" . $start_date->format("d/m/Y") . "</th>";
$start_date->modify("+1 day");
}
?>
</tr>
<?php
$rows = ['toto', 'titi', 'lulu'];
foreach ($rows as $row) {
echo "<tr><td class='fixed-column' onclick='editCell(this)'>$row</td>";
echo "<td class='total-column'>0</td>";
$start_date = new DateTime("2025-01-01");
while ($start_date <= $end_date) {
echo "<td onclick='toggleCell(this, this.parentElement)'>0</td>";
$start_date->modify("+1 day");
}
echo "</tr>";
}
?>
</table>
</div>
<script>
function editCell(cell) {
if (cell.querySelector("input")) return;
var input = document.createElement("input");
input.type = "text";
input.value = cell.innerText;
cell.innerHTML = '';
cell.appendChild(input);
input.focus();
input.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
cell.innerText = input.value;
}
});
input.addEventListener('blur', function() {
cell.innerText = input.value;
});
}
function toggleCell(cell, row) {
if (cell.innerText === '0') {
cell.innerText = '1';
cell.classList.add('active-cell');
} else {
cell.innerText = '0';
cell.classList.remove('active-cell');
}
updateTotal(row);
}
function updateTotal(row) {
let total = 0;
for (let i = 2; i < row.cells.length; i++) {
let cellValue = parseInt(row.cells[i].innerText);
if (!isNaN(cellValue)) {
total += cellValue;
}
}
row.cells[1].innerText = total;
}
</script>
</body>
</html>