<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau Dynamique</title>
<style>
table {
width: auto;
min-width: 1200px; /* Largeur minimale pour gérer le grand nombre de colonnes */
border-collapse: separate;
border-spacing: 0;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
white-space: nowrap; /* Évite le retour à la ligne */
box-sizing: border-box; /* Inclut les bordures et le padding dans la largeur totale */
}
thead th {
background: #f8f8f8;
position: sticky;
top: 0;
z-index: 2; /* S'assure que l'en-tête reste au-dessus du contenu */
}
.table-container {
width: 100%;
overflow-x: auto;
position: relative;
margin-top: 20px;
border: 1px solid #ddd; /* Pour délimiter la zone de défilement */
}
/* Fixe les deux premières colonnes */
th:first-child, td:first-child {
position: sticky;
left: 0;
z-index: 4; /* Pour qu'elles soient au-dessus des autres colonnes */
background: white;
border-right: 2px solid black; /* Séparation visible */
width: 80px; /* Largeur fixe pour la première colonne */
min-width: 80px; /* Largeur minimale pour la première colonne */
max-width: 80px; /* Largeur maximale pour la première colonne */
}
th:nth-child(2), td:nth-child(2) {
position: sticky;
left: 80px; /* Décalage pour ne pas chevaucher la première colonne */
z-index: 3; /* Pour qu'elles soient au-dessus des autres colonnes */
background: white;
border-right: 2px solid black; /* Séparation visible */
width: 100px; /* Largeur fixe pour la deuxième colonne */
min-width: 100px; /* Largeur minimale pour la deuxième colonne */
max-width: 100px; /* Largeur maximale pour la deuxième colonne */
}
/* Centrer la combo box dans la cellule */
td:first-child {
display: flex;
justify-content: center;
align-items: center;
}
select {
width: 100%; /* Assure que la combo box prend toute la largeur de la cellule */
max-width: 80px; /* Limite la largeur maximale de la combo box */
}
button {
margin-top: 20px;
padding: 10px;
font-size: 16px;
}
.cell-active {
background-color: green;
}
/* Largeur fixe pour les colonnes à partir de la troisième */
th:nth-child(n+3), td:nth-child(n+3) {
width: 50px; /* Largeur fixe pour les colonnes à partir de la troisième */
min-width: 50px; /* Largeur minimale pour les colonnes à partir de la troisième */
max-width: 50px; /* Largeur maximale pour les colonnes à partir de la troisième */
}
/* Style pour la cellule grisée */
.unused-cell {
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr id="header-row">
<th>Nom</th>
<th>Total</th>
</tr>
<tr id="month-row">
<th>Mois</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="semaine-row">
<th>Semaine</th>
<th class="unused-cell">Non utilisé</th>
</tr>
<tr id="numero-row">
<th>Numero</th>
<th class="unused-cell">Non utilisé</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<button id="getDataButton">Récupérer les données du tableau</button>
<button id="sendDataButton">Envoyer les données</button>
<button id="readDataButton">Lire les données</button>
<button id="addRowButton">Ajouter une ligne</button>
<script>
const numCols = 100; // Nombre de colonnes à 100
const holidays = [
'2025-01-01', // Nouvel An
'2025-04-21', // Pâques
'2025-05-01', // Fête du Travail
'2025-05-08', // Victoire 1945
'2025-05-29', // Ascension
'2025-06-09', // Pentecôte
'2025-07-14', // Fête Nationale
'2025-08-15', // Assomption
// Ajoutez d'autres jours fériés et fêtes religieuses si nécessaire
];
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
const numeroWeekRow = document.getElementById("numero-row");
//const numeroWeekRow = document.createElement("tr"); // Nouvelle ligne pour les numéros de semaine
//numeroWeekRow.id = "Numero_week"; // Donnons un ID à cette ligne
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
let currentWeekIndex = 0; // Suivi de l'index de la semaine pour alterner les couleurs des semaines
let isEvenMonth = false; // Variable pour savoir si c'est un mois pair ou impair
let allDateCells = []; // Tableau pour stocker les cellules des dates
// Ajouter la première cellule "Numero" et la deuxième cellule vide et grisée
//let thNumero = document.createElement("th");
//thNumero.textContent = "Numero";
//numeroWeekRow.appendChild(thNumero);
//let thVide = document.createElement("th");
//thVide.style.backgroundColor = "#D3D3D3"; // Gris clair pour la cellule vide
//numeroWeekRow.appendChild(thVide);
// Ajouter la ligne Numero_week avant la ligne des semaines
weekRow.parentNode.insertBefore(numeroWeekRow, weekRow);
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête (ligne 1)
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
allDateCells.push(th); // Stockage de la cellule de la date
// Ajout de l'initiale du mois (ligne 2)
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
// Application de la couleur de fond alternée pour les mois dans la ligne 2 (mois pairs / impairs)
if (lastTh) {
if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
isEvenMonth = true;
} else {
lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
isEvenMonth = false;
}
}
}
// Appliquer la couleur de fond alternée dans la première ligne (jours) pour les mois pairs/impairs
if (isEvenMonth) {
th.style.backgroundColor = "#FFA500"; // Mois pair : Orange
} else {
th.style.backgroundColor = "#0000FF"; // Mois impair : Bleu
}
// Ajout de l'initiale du jour de la semaine (ligne 3)
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
// Application de la couleur de fond alternée pour les semaines paires et impaires
if (dayOfWeek === 0) { // Dimanche (fin de la semaine)
if (currentWeekIndex % 2 === 0) {
// Semaine paire : Gris clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#E0E0E0";
}
} else {
// Semaine impaire : Bleu clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#B0C4DE";
}
}
currentWeekIndex++;
}
}
// Ajouter les numéros de semaine sous la ligne de semaine
let numeroSemaine = document.createElement("th");
numeroSemaine.textContent = getISOWeek(currentDate); // Fonction pour obtenir le numéro de semaine
numeroWeekRow.appendChild(numeroSemaine);
currentDate.setDate(currentDate.getDate() + 1);
}
}
// Fonction pour obtenir le numéro de la semaine (selon la norme ISO)
function getISOWeek(date) {
const tempDate = new Date(date.getTime());
tempDate.setDate(tempDate.getDate() - tempDate.getDay() + 1); // Placer le jour au lundi
const startDate = new Date(tempDate.getFullYear(), 0, 1);
const days = Math.floor((tempDate - startDate) / (24 * 60 * 60 * 1000));
return Math.ceil((days + 1) / 7);
}
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
let currentWeekIndex = 0; // Suivi de l'index de la semaine pour alterner les couleurs des semaines
let isEvenMonth = false; // Variable pour savoir si c'est un mois pair ou impair
let allDateCells = []; // Tableau pour stocker les cellules des dates
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête (ligne 1)
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
allDateCells.push(th); // Stockage de la cellule de la date
// Ajout de l'initiale du mois (ligne 2)
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
// Application de la couleur de fond alternée pour les mois dans la ligne 2 (mois pairs / impairs)
if (lastTh) {
if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
isEvenMonth = true;
} else {
lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
isEvenMonth = false;
}
}
}
// Appliquer la couleur de fond alternée dans la première ligne (jours) pour les mois pairs/impairs
if (isEvenMonth) {
th.style.backgroundColor = "#FFA500"; // Mois pair : Orange
} else {
th.style.backgroundColor = "#0000FF"; // Mois impair : Bleu
}
// Ajout de l'initiale du jour de la semaine (ligne 3)
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
// Application de la couleur de fond alternée pour les semaines paires et impaires
if (dayOfWeek === 0) { // Dimanche (fin de la semaine)
if (currentWeekIndex % 2 === 0) {
// Semaine paire : Gris clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#E0E0E0";
}
} else {
// Semaine impaire : Bleu clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#B0C4DE";
}
}
currentWeekIndex++;
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
*/
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
let currentWeekIndex = 0; // Suivi de l'index de la semaine pour alterner les couleurs des semaines
let currentMonthIsEven = false; // Pour savoir si le mois actuel est pair ou impair
let allDateCells = []; // Tableau pour stocker les cellules des dates
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête (ligne 1)
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
allDateCells.push(th); // Stockage de la cellule de la date
// Ajout de l'initiale du mois (ligne 2)
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
// Application de la couleur de fond alternée pour les mois dans la ligne 2 (mois pairs / impairs)
if (lastTh) {
if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
currentMonthIsEven = true;
} else {
lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
currentMonthIsEven = false;
}
}
}
// Ajout de l'initiale du jour de la semaine (ligne 3)
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
// Application de la couleur de fond alternée pour les semaines paires et impaires
if (dayOfWeek === 0) { // Dimanche (fin de la semaine)
if (currentWeekIndex % 2 === 0) {
// Semaine paire : Gris clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#E0E0E0";
}
} else {
// Semaine impaire : Bleu clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#B0C4DE";
}
}
currentWeekIndex++;
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
// Appliquer la couleur de fond alternée dans la première ligne (jours) pour les mois pairs/impairs
allDateCells.forEach((cell, index) => {
const monthIndex = new Date(allDateCells[index].textContent + ' ' + '2025').getMonth(); // On déduit le mois de la cellule de la date
if (monthIndex % 2 === 0) {
cell.style.backgroundColor = "#FFA500"; // Mois pair : Orange
} else {
cell.style.backgroundColor = "#0000FF"; // Mois impair : Bleu
}
});
}
/*
/*
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête (ligne 1)
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
// Ajout de l'initiale du mois (ligne 2)
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
}
// Application de la couleur de fond alternée pour les mois dans la ligne 2 (mois pairs / impairs)
if (lastTh) {
if (colSpan === 1) { // Si c'est un nouveau mois
if (parseInt(currentDate.toLocaleString('default', { month: 'numeric' })) % 2 === 0) {
lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
} else {
lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
}
}
}
// Ajout de l'initiale du jour de la semaine (ligne 3)
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
// Application de la couleur de fond alternée pour les semaines paires et impaires
if (dayOfWeek === 0) { // Dimanche (fin de la semaine)
if (currentWeekIndex % 2 === 0) {
// Semaine paire : Gris clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#E0E0E0";
}
} else {
// Semaine impaire : Bleu clair
for (let i = weekRow.children.length - 7; i < weekRow.children.length; i++) {
weekRow.children[i].style.backgroundColor = "#B0C4DE";
}
}
currentWeekIndex++;
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
*/
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
let currentWeekIndex = 0; // Suivi de l'index de la semaine pour alterner les couleurs des semaines
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
// Ajout de l'initiale du mois
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
}
// Ajout de l'initiale du jour de la semaine
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
// Application de la couleur de fond alternée pour les semaines paires et impaires
if (dayOfWeek === 0) { // Dimanche (fin de la semaine)
if (currentWeekIndex % 2 === 0) {
// Semaine paire : Gris clair
for (let i = 0; i < weekRow.children.length; i++) {
if (weekRow.children[i].textContent === currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0)) {
weekRow.children[i].style.backgroundColor = "#E0E0E0";
}
}
} else {
// Semaine impaire : Bleu clair
for (let i = 0; i < weekRow.children.length; i++) {
if (weekRow.children[i].textContent === currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0)) {
weekRow.children[i].style.backgroundColor = "#B0C4DE";
}
}
}
currentWeekIndex++;
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
*/
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
let currentMonthIndex = 0; // Suivi de l'index du mois pour alterner les couleurs
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
// Ajout de l'initiale du mois
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
// Application de la couleur de fond alternée à partir de la colonne 3
if (currentMonthIndex % 2 === 0) {
lastTh.style.backgroundColor = "#E0E0E0"; // Mois pair : Gris clair
} else {
lastTh.style.backgroundColor = "#B0C4DE"; // Mois impair : Bleu clair
}
currentMonthIndex++;
}
// Ajout de l'initiale du jour de la semaine
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
*/
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
const weekRow = document.getElementById("semaine-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
// Ajout du jour dans l'en-tête
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
// Ajout de l'initiale du mois
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
}
// Ajout de l'initiale du jour de la semaine
let weekTh = document.createElement("th");
weekTh.textContent = currentDate.toLocaleString('default', { weekday: 'short' }).charAt(0);
weekRow.appendChild(weekTh);
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
/*
/* OK
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
let lastMonth = "";
let colSpan = 0;
let lastTh = null;
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
let monthShort = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
if (monthShort === lastMonth) {
colSpan++;
lastTh.colSpan = colSpan;
} else {
lastMonth = monthShort;
colSpan = 1;
lastTh = document.createElement("th");
lastTh.textContent = monthShort;
monthRow.appendChild(lastTh);
}
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
*/
/*
function createTable() {
const theadRow = document.getElementById("header-row");
const monthRow = document.getElementById("month-row");
// Ajouter dynamiquement les colonnes après "Total"
let currentDate = new Date('2025-01-01');
const endDate = new Date('2025-06-30');
while (currentDate <= endDate) {
const dayOfWeek = currentDate.getDay();
const dateString = currentDate.toISOString().split('T')[0];
if (dayOfWeek !== 0 && dayOfWeek !== 6 && !holidays.includes(dateString)) {
let th = document.createElement("th");
th.textContent = currentDate.getDate();
theadRow.appendChild(th);
let monthTh = document.createElement("th");
monthTh.textContent = currentDate.toLocaleString('default', { month: 'short' }).charAt(0);
monthRow.appendChild(monthTh);
}
currentDate.setDate(currentDate.getDate() + 1);
}
}*/
function addRow() {
const tbody = document.getElementById("table-body");
let row = document.createElement("tr");
// Colonne avec select
let selectCell = document.createElement("td");
let select = document.createElement("select");
for (let j = 1; j <= 5; j++) {
let option = document.createElement("option");
option.textContent = j;
select.appendChild(option);
}
selectCell.appendChild(select);
row.appendChild(selectCell);
// Colonne total (initialisé à 0)
let totalCell = document.createElement("td");
totalCell.textContent = "0";
row.appendChild(totalCell);
// Colonnes dynamiques avec valeurs aléatoires
let total = 0;
for (let j = 0; j < numCols; j++) {
let cell = document.createElement("td");
let value = Math.random() < 0.5 ? "1" : "0";
cell.textContent = value;
if (value === "1") {
cell.classList.add('cell-active');
}
total += parseInt(value);
cell.addEventListener('click', handleCellClick);
row.appendChild(cell);
}
// Mettre à jour la cellule "Total"
totalCell.textContent = total;
tbody.appendChild(row);
}
function handleCellClick(event) {
const cell = event.target;
const row = cell.parentElement;
const totalCell = row.querySelector('td:nth-child(2)');
let total = parseInt(totalCell.textContent);
if (cell.textContent === "0") {
cell.textContent = "1";
cell.classList.add('cell-active');
total += 1;
} else {
cell.textContent = "0";
cell.classList.remove('cell-active');
total -= 1;
}
totalCell.textContent = total;
}
window.onload = function() {
createTable();
};
function randomizeCells() {
let rows = document.querySelectorAll('#table-body tr');
rows.forEach(row => {
let cells = row.querySelectorAll('td');
let total = 0;
for (let i = 2; i < cells.length; i++) { // Commence à 2 pour ignorer select et total
let value = Math.random() < 0.5 ? '1' : '0';
cells[i].textContent = value;
if (value === "1") {
cells[i].classList.add('cell-active');
} else {
cells[i].classList.remove('cell-active');
}
total += parseInt(value);
}
// Mettre à jour la cellule "Total"
cells[1].textContent = total;
});
}
function getTableData() {
let rows = document.querySelectorAll('tbody tr');
let tableData = [];
rows.forEach(function(row) {
let rowData = [];
let cells = row.querySelectorAll('td');
// Récupère toutes les cellules, y compris la première cellule qui contient la combo box
cells.forEach(function(cell) {
// Si la cellule contient une combo box, on récupère la valeur sélectionnée
if (cell.querySelector('select')) {
rowData.push(cell.querySelector('select').value); // Récupère la valeur de la combo box
} else {
rowData.push(cell.innerText); // Récupère le texte de la cellule
}
});
tableData.push(rowData); // Ajoute les données de la ligne au tableau
});
return tableData; // Retourne toutes les données du tableau (y compris la combo box)
}
function logTableData() {
let data = getTableData();
console.log(data); // Affiche les données dans la console
// Convertir en JSON et afficher dans la console
console.log(JSON.stringify(data, null, 2)); // JSON avec une indentation de 2 espaces
}
// Ajouter un événement au bouton pour déclencher la récupération des données
document.getElementById('getDataButton').addEventListener('click', logTableData);
function sendTableData() {
let data = getTableData(); // Récupération des données du tableau
let jsonData = JSON.stringify(data);
fetch('insert.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: jsonData
})
.then(response => response.json()) // Convertir la réponse en JSON
.then(data => {
alert(data.message); // Afficher le message du serveur
})
.catch(error => {
console.error('Erreur:', error);
});
}
document.getElementById('sendDataButton').addEventListener('click', sendTableData);
// Fonction pour lire les données du dernier enregistrement
function readTableData() {
fetch('lecture.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json()) // Convertir la réponse en JSON
.then(data => {
if (data.success) {
updateTable(data.data_json); // Met à jour le tableau avec les données récupérées
} else {
alert('Erreur lors de la récupération des données.');
}
})
.catch(error => {
console.error('Erreur:', error);
});
}
// Associer la fonction au bouton "Lire les données"
document.getElementById('readDataButton').addEventListener('click', readTableData);
function updateTable(data) {
let tableData = JSON.parse(data); // Convertir le JSON en tableau JS
const tbody = document.getElementById("table-body");
// Supprimer toutes les lignes existantes dans le tableau
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
// Recréer les lignes en fonction des données JSON
tableData.forEach(rowData => {
let row = document.createElement("tr");
// Colonne avec select
let selectCell = document.createElement("td");
let select = document.createElement("select");
for (let j = 1; j <= 5; j++) {
let option = document.createElement("option");
option.textContent = j;
select.appendChild(option);
}
select.value = rowData[0]; // Définir la valeur sélectionnée
selectCell.appendChild(select);
row.appendChild(selectCell);
// Colonne total
let totalCell = document.createElement("td");
row.appendChild(totalCell);
// Colonnes dynamiques
let total = 0;
for (let j = 2; j < rowData.length; j++) {
let cell = document.createElement("td");
cell.textContent = rowData[j];
if (rowData[j] === "1") {
cell.classList.add('cell-active');
}
total += parseInt(rowData[j]);
cell.addEventListener('click', handleCellClick);
row.appendChild(cell);
}
// Mettre à jour la cellule "Total"
totalCell.textContent = total;
tbody.appendChild(row);
});
}
// Ajouter un événement au bouton pour ajouter une nouvelle ligne
document.getElementById('addRowButton').addEventListener('click', addRow);
</script>
</body>
</html>