// Array bidimensionale predefinito
let prodotti = [
    ["ID", "Prodotto", "Prezzo", "Quantità"],
    [1, "Computer", 899.99, 15],
    [2, "Mouse", 25.50, 42],
    [3, "Tastiera", 45.00, 23],
    [4, "Monitor", 299.99, 8],
    [5, "Cuffie", 79.99, 31]
];

let mioBottone = document.getElementById("bottone-tabella");
let bottoneScomparsa = document.getElementById("cancella-tabella");
mioBottone.addEventListener("click", creaTabella)
bottoneScomparsa.addEventListener("click", cancellaTabella)

function cancellaTabella() {
    let contenitoreTabella = document.getElementById("container");
    contenitoreTabella.innerHTML = "";
}

function creaTabella () {

    cancellaTabella();
    let creaTabella = document.createElement("table");
    creaTabella.className = "table-class";
    let contenitoreTabella = document.getElementById("container");
    contenitoreTabella.appendChild(creaTabella);

    for (let i = 0; i < prodotti.length; i++) {
        let row = document.createElement("tr");
        let arrayProdotti = prodotti[i];

        for (let cellaData of arrayProdotti) {
            let cella;

            if (i === 0) {
                cella = document.createElement("th");
            } else {
                cella = document.createElement("td");
            }
            cella.textContent = cellaData;
            row.appendChild(cella);
        }

        creaTabella.appendChild(row);
    }

    // if (contenitoreTabella) {
    //     contenitoreTabella.appendChild(creaTabella);
    // }

    let celleDati = document.querySelectorAll('.table-class');

    // for (let cella of celleDati) {
    //     cella.style.backgroundColor = '#e0f7fa';
    // }

    celleDati.forEach(cella => {
        cella.style.backgroundColor = '#e0f7fa';
    });
}

// creaTabella();

//

// HTML




    
    
    
    
    




Cliccami per far apparire la tabella!



Cliccami per far scomparire la tabella