Revise paste 987c1b5380954

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Esercizio 3 novembre</title>
    <script defer src="index.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        }

button {
            font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
            font-size: 1.3em;
        }

.table-class {
            border-collapse: collapse;
            border: 1px solid black;
            width: 100%;
        }
        .table-class th, .table-class td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        .table-class th {
            background-color: #92cabd;
        }

</style>
</head>
<body>
<br>
<button id="bottone-tabella">Cliccami per far apparire la tabella!</button>
<br><br>
<button id="cancella-tabella">Cliccami per far scomparire la tabella</button>

</div>

</body>
</html>