File "debug02.php"
Full Path: /home/analogde/www/Dev tableau/debug02.php
File size: 7.73 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 avec Combo Box</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
select {
width: 80px;
}
button {
margin-top: 20px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Total</th>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
<th>Col17</th>
<th>Col18</th>
<th>Col19</th>
</tr>
</thead>
<tbody>
<!-- Ligne 1 -->
<tr>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<!-- Ligne 2 -->
<tr>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
</tr>
<!-- Ligne 3 -->
<tr>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<!-- Ligne 4 -->
<tr>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
</tr>
<!-- Ligne 5 -->
<tr>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<button id="getDataButton">Récupérer les données du tableau</button>
</body>
</html>
<script>
function randomizeCells() {
let rows = document.querySelectorAll('tbody tr');
rows.forEach(function(row) {
let cells = row.querySelectorAll('td');
for (let i = 1; i < cells.length; i++) { // Commence à 1 pour ignorer la combo box
cells[i].innerText = Math.random() < 0.5 ? '1' : '0';
}
});
}
window.onload = randomizeCells;
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
console.log(isValidJSON(data)); // Affiche : true
let conversion = JSON.stringify(data, null, 2);
console.log(isValidJSON(conversion)); // Affiche : true
}
function isValidJSON(jsonString) {
try {
JSON.parse(jsonString); // Essaie de convertir la chaîne en objet/array
return true; // Si pas d'erreur, c'est un JSON valide
} catch (e) {
return false; // Si une erreur survient, ce n'est pas du JSON valide
}
}
//window.onload = logTableData;
// Ajouter un événement au bouton pour déclencher la récupération des données
document.getElementById('getDataButton').addEventListener('click', logTableData);
</script>