Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
WORDPRESS
/
Dev tableau
:
debug02.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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>