File "debug03.php"

Full Path: /home/analogde/www/Design/Dev tableau/debug03.php
File size: 4.95 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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: 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>
            <!-- Colonnes dynamiques -->
            <script>
                document.write(Array.from({ length: numCols }, (_, i) => `<th>Col${i + 1}</th>`).join(''));
            </script>
        </tr>
    </thead>
    <tbody id="table-body"></tbody>
</table>

<button id="getDataButton">Récupérer les données du tableau</button>

<script>
   
   const numRows = 5;
const numCols = 19;


    function createTable() {
        const thead = document.querySelector("thead tr");
        for (let i = 0; i < numCols; i++) {
            let th = document.createElement("th");
            th.textContent = `Col${i + 1}`;
            thead.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);
        }
    }

    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';
            }
        });
    }

 

    window.onload = function() {
        createTable();
        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 : false

    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>

</body>
</html>