File "000debug09.php"
Full Path: /home/analogde/www/Design/Dev tableau/000debug09.php
File size: 8.86 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 Dynamique</title>
<style>
/* Conteneur du tableau avec une barre de défilement horizontale */
.table-container {
width: 100%;
overflow-x: auto;
margin-top: 20px;
position: relative;
}
/* Pour éviter que le tableau ne prenne trop de place */
table {
width: auto;
min-width: 1600px; /* Largeur minimale pour gérer le grand nombre de colonnes */
border-collapse: collapse;
}
/* Bordures des cellules */
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
white-space: nowrap; /* Évite le retour à la ligne */
}
/* En-tête du tableau */
thead th {
background: #f8f8f8;
position: sticky;
top: 0;
z-index: 2; /* S'assure que l'en-tête reste au-dessus du contenu */
}
/* Fixe les deux premières colonnes */
th:first-child, td:first-child,
th:nth-child(2), td:nth-child(2) {
position: sticky;
left: 0;
z-index: 3; /* Assure que les colonnes fixes restent au-dessus des autres */
background-color: white; /* Empêche la superposition avec le fond */
border-right: 2px solid black; /* Séparation visible entre les colonnes */
min-width: 100px; /* Fixe la largeur minimale des colonnes fixes */
}
/* Position de la deuxième colonne */
th:nth-child(2), td:nth-child(2) {
left: 100px; /* Décalage pour ne pas chevaucher la première colonne */
z-index: 3;
background-color: white; /* Assurez-vous que l'arrière-plan est opaque */
border-right: 2px solid black;
min-width: 100px;
}
/* Assure que le tableau ne se déforme pas et que les cellules ne sont pas coupées */
td, th {
box-sizing: border-box; /* S'assurer que les bordures et les marges ne déforment pas les dimensions */
}
select {
width: 80px;
}
button {
margin-top: 20px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr id="header-row">
<th>Nom</th>
<th>Total</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>
<script>
const numRows = 5;
const numCols = 100; // Nombre de colonnes à 100
function createTable() {
const theadRow = document.getElementById("header-row");
// Ajouter dynamiquement les colonnes après "Total"
for (let i = 0; i < numCols; i++) {
let th = document.createElement("th");
th.textContent = `Col${i + 1}`;
theadRow.appendChild(th);
}
const tbody = document.getElementById("table-body");
for (let i = 0; i < numRows; i++) {
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
for (let j = 0; j < numCols; j++) {
let cell = document.createElement("td");
cell.textContent = Math.random() < 0.5 ? "1" : "0";
row.appendChild(cell);
}
tbody.appendChild(row);
}
}
window.onload = function() {
createTable();
randomizeCells();
};
function randomizeCells() {
let rows = document.querySelectorAll('#table-body tr');
rows.forEach(row => {
let cells = row.querySelectorAll('td');
for (let i = 2; i < cells.length; i++) { // Commence à 2 pour ignorer select et total
cells[i].textContent = Math.random() < 0.5 ? '1' : '0';
}
});
}
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 et mettre à jour le tableau
function readTableData() {
fetch('lecture.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ action: 'getLastData' })
})
.then(response => response.json()) // Convertir la réponse en JSON
.then(data => {
if (data && data.data_json) {
// Afficher les données récupérées
alert('Données récupérées : ' + JSON.stringify(data.data_json, null, 2));
// Mettre à jour le tableau avec les nouvelles données
updateTable(data.data_json);
} else {
alert('Aucune donnée trouvée.');
}
})
.catch(error => {
console.error('Erreur:', error);
});
}
// Fonction pour mettre à jour le tableau avec les données lues
function updateTable(data) {
const tbody = document.getElementById("table-body");
tbody.innerHTML = ""; // Effacer le contenu actuel du tableau
data.forEach(rowData => {
let row = document.createElement("tr");
rowData.forEach(cellData => {
let cell = document.createElement("td");
cell.textContent = cellData;
row.appendChild(cell);
});
tbody.appendChild(row);
});
}
document.getElementById('readDataButton').addEventListener('click', readTableData);
</script>
</body>
</html>