Popolare Tabella

Codegrind Team•Jul 21 2022

Traccia

Proviamo a popolare una tabella in modo dinamico partendo da un array di oggetti contenente dei dati e da un elemento table in HTML.

Strutturate l’oggetto come segue:

id
nome
cognome
email
codice fiscale
indirizzo

Se il risultato è corretto, ogni soluzione è valida.

Soluzione

Pagina HTML.

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table id="tabella">
      <thead>
        <th>ID</th>
        <th>Nome</th>
        <th>Cognome</th>
        <th>Email</th>
        <th>Codice Fiscale</th>
        <th>Indirizzo</th>
      </thead>
    </table>
    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

const data = [
  {
    id: 1,
    nome: "luca",
    cognome: "rossi",
    email: "luca.rossi@gmmaaaaailit",
    codiceFiscale: "kdrwde32f93x109m",
    indirizzo: "via torino",
  },
  {
    id: 2,
    nome: "marco",
    cognome: "verdi",
    email: "marco.verdi@gmmaaaaailit",
    codiceFiscale: "gbbfrw54f32x176p",
    indirizzo: "via piacenza",
  },
];

const table = document.getElementById("tabella");

data.forEach((element) => {
  const row = document.createElement("tr");

  Object.keys(element).forEach((key) => {
    const column = document.createElement("td");
    const text = document.createTextNode(element[key]);
    column.appendChild(text);
    row.appendChild(column);
  });

  table.appendChild(row);
});