Tiny File Manager

Back Back Up Advanced Editor

<!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 id="header-row">
            <th>Nom</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody id="table-body"></tbody>
</table>

<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>

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

window.onload = function() {
        createTable();
        randomizeCells();
    };

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

}

//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);

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

// Associer la fonction au bouton
document.getElementById('readDataButton').addEventListener('click', readTableData);

function updateTable(data) {
    let tableData = JSON.parse(data); // Convertir le JSON en tableau JS
    let rows = document.querySelectorAll('#table-body tr');

for (let i = 0; i < rows.length; i++) {
        let cells = rows[i].querySelectorAll('td');
        for (let j = 0; j < tableData[i].length; j++) {
            if (cells[j].querySelector('select')) {
                cells[j].querySelector('select').value = tableData[i][j]; // Met à jour la combo box
            } else {
                cells[j].textContent = tableData[i][j]; // Met à jour les autres cellules
            }
        }
    }
}

</script>

</body>
</html>