File "table0042.php"
Full Path: /home/analogde/www/Dev tableau/table0042.php
File size: 9.53 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau HTML avec Bootstrap</title>
<!-- Lien vers la feuille de style Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Container pour permettre le défilement horizontal */
.table-container {
width: 100%;
overflow-x: auto; /* Active le défilement horizontal */
margin-bottom: 10px;
display: block; /* Pour permettre le défilement */
}
/* Ajout d'un tableau de style Bootstrap */
table {
width: 100%; /* Pour occuper tout l'espace horizontal disponible */
table-layout: auto; /* Permet d'ajuster automatiquement la largeur des colonnes */
min-width: 1500px; /* S'assure que la largeur du tableau dépasse la largeur de l'écran */
}
th, td {
padding: 5px;
text-align: center;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
/* Première colonne sticky */
.fixed-column {
position: sticky;
left: 0;
background-color: white;
z-index: 3;
border-left: 2px solid black;
border-right: 1px solid black;
padding-left: 10px;
padding-right: 10px;
width: 222px;
min-width: 222px;
}
/* Deuxième colonne sticky */
.second-fixed-column {
position: sticky;
left: 222px;
background-color: white;
z-index: 2;
border-right: 1px solid black;
padding-left: 5px;
padding-right: 5px;
width: 100px;
min-width: 100px;
white-space: nowrap;
}
/* Colonne des dates : ajustement de largeur */
th.week-even, th.week-odd {
min-width: 50px; /* Largeur minimale pour les dates */
width: 60px; /* Largeur définie pour les dates */
}
/* Couleurs de la colonne Total */
.total-column {
background-color: #f0f0f0;
pointer-events: none;
width: 100px;
}
/* Semaine paire ou impaire */
.week-even {
background-color: #e0f7fa;
}
.week-odd {
background-color: #ffecb3;
}
/* Classe pour les cellules avec la valeur 1 */
.active-cell {
background-color: green;
color: white;
}
/* Classe pour les cellules avec la valeur 0 (valeur par défaut) */
.inactive-cell {
background-color: #d3d3d3; /* Gris clair pour la cellule avec 0 */
color: black;
}
.button-container {
text-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="table-container">
<table id="data-table" class="table table-bordered table-striped">
<thead>
<tr>
<th class="fixed-column">Nom</th>
<th class="second-fixed-column total-column">Total</th>
<!-- Génération dynamique des dates -->
<?php
$start_date = new DateTime("2025-01-01");
$end_date = new DateTime("2025-12-31");
$holidays = [
"01/01", "01/05", "08/05", "14/07", "15/08", "01/11", "11/11", "25/12",
date("d/m", strtotime("2025-05-29")),
date("d/m", strtotime("2025-06-08"))
];
$dates = [];
while ($start_date <= $end_date) {
$dayOfWeek = $start_date->format("N");
$formattedDate = $start_date->format("d");
if ($dayOfWeek < 6 && !in_array($formattedDate, $holidays)) {
$weekNumber = $start_date->format("W");
$month = $start_date->format("m");
$dates[] = ["date" => $formattedDate, "week" => $weekNumber, "month" => $month];
}
$start_date->modify("+1 day");
}
$currentWeek = null;
$weekClass = "week-even";
$months = [
"01" => "Janvier", "02" => "Février", "03" => "Mars", "04" => "Avril",
"05" => "Mai", "06" => "Juin", "07" => "Juillet", "08" => "Août",
"09" => "Septembre", "10" => "Octobre", "11" => "Novembre", "12" => "Décembre"
];
foreach ($dates as $data) {
if ($currentWeek !== $data['week']) {
$currentWeek = $data['week'];
$weekClass = ($weekClass === "week-even") ? "week-odd" : "week-even";
}
echo "<th class='$weekClass'>{$data['date']}</th>";
}
?>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed-column">Mois</td>
<td class="second-fixed-column"></td>
<?php
$currentMonth = null;
$count = 1;
foreach ($dates as $index => $data) {
if ($currentMonth !== $data['month']) {
if ($currentMonth !== null) {
echo "<td colspan='$count'>{$months[$currentMonth]}</td>";
}
$currentMonth = $data['month'];
$count = 1;
} else {
$count++;
}
if ($index == count($dates) - 1) {
echo "<td colspan='$count'>{$months[$currentMonth]}</td>";
}
}
?>
</tr>
<tr>
<td class="fixed-column">Semaine</td>
<td class="second-fixed-column"></td>
<?php
$currentWeek = null;
$weekCount = 1;
foreach ($dates as $index => $data) {
if ($currentWeek !== $data['week']) {
if ($currentWeek !== null) {
echo "<td colspan='$weekCount'>{$currentWeek}</td>";
}
$currentWeek = $data['week'];
$weekCount = 1;
} else {
$weekCount++;
}
if ($index == count($dates) - 1) {
echo "<td colspan='$weekCount'>{$currentWeek}</td>";
}
}
?>
</tr>
</tbody>
</table>
</div>
<div class="button-container">
<button class="btn btn-primary" onclick="addRow()">Ajouter une ligne</button>
</div>
<script>
function addRow() {
let table = document.getElementById("data-table");
let row = table.insertRow(-1);
let cell1 = row.insertCell(0);
cell1.classList.add("fixed-column");
let input = document.createElement("input");
input.type = "text";
input.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
input.blur();
}
});
cell1.appendChild(input);
let cell2 = row.insertCell(1);
cell2.classList.add("second-fixed-column", "total-column");
cell2.innerText = "0";
for (let i = 2; i < table.rows[0].cells.length; i++) {
let cell = row.insertCell(i);
cell.innerText = "0";
cell.onclick = function() {
toggleCell(cell, row);
};
}
}
function toggleCell(cell, row) {
if (cell.innerText === '0') {
cell.innerText = '1';
cell.classList.add('active-cell'); // Applique la couleur verte pour 1
cell.classList.remove('inactive-cell'); // Retire la couleur grise
} else {
cell.innerText = '0';
cell.classList.add('inactive-cell'); // Applique la couleur grise pour 0
cell.classList.remove('active-cell'); // Retire la couleur verte
}
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>