Generare Tabelle

Codegrind Team•Jul 21 2022

Traccia

Create una classe tabella che vi permetta di generare nell’html qualsiasi tabella a piacimento. Ogni tabella in fase di creazione deve ricevere 2 parametri. Un array con i nomi delle colonne ed un array di oggetti che rappresenta i dati delle righe.

Cambiando i dati che forniamo alla tabella in fase di creazione, il risultato deve sempre e comunque dare una tabella correttamente generata.

Gestite la tabella con una classe apposita.

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>
    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

Class Tabella

class Tabella {
  nomiColonne;
  data;

  constructor(nomiColonne, data) {
    this.nomiColonne = nomiColonne;
    this.data = data;
    this.generaTabella();
  }

  generaTabella() {
    const tabella = document.createElement("table");
    tabella.appendChild(this.generaColonne());
    tabella.appendChild(this.generaRighe());
    document.querySelector("body").appendChild(tabella);
  }

  generaColonne() {
    const thead = document.createElement("thead");
    this.nomiColonne.forEach((nomeColonna) => {
      const th = document.createElement("th");
      const text = document.createTextNode(nomeColonna);
      th.appendChild(text);
      thead.appendChild(th);
    });
    return thead;
  }
  generaRighe() {
    const tbody = document.createElement("tbody");
    this.data.forEach((riga) => {
      const tr = document.createElement("tr");
      Object.keys(riga).forEach((key) => {
        const cella = document.createElement("td");
        const text = document.createTextNode(riga[key]);
        cella.appendChild(text);
        tr.appendChild(cella);
      });
      tbody.appendChild(tr);
    });
    return tbody;
  }
}

Dati e colonne tabella1

const nomiColonne1 = [
  "id",
  "nome",
  "cognome",
  "email",
  "codice fiscale",
  "indirizzo",
];

const data1 = [
  {
    id: 1,
    nome: "luca",
    cognome: "rossi",
    email: "lucarossi@gmaail.it",
    codiceFiscale: "kdrwde32f93x109m",
    indirizzo: "via torino",
  },
  {
    id: 1,
    nome: "luca",
    cognome: "rossi",
    email: "lucarossi@gmaail.it",
    codiceFiscale: "kdrwde32f93x109m",
    indirizzo: "via torino",
  },
  {
    id: 1,
    nome: "luca",
    cognome: "rossi",
    email: "lucarossi@gmaail.it",
    codiceFiscale: "kdrwde32f93x109m",
    indirizzo: "via torino",
  },
  {
    id: 1,
    nome: "luca",
    cognome: "rossi",
    email: "lucarossi@gmaail.it",
    codiceFiscale: "kdrwde32f93x109m",
    indirizzo: "via torino",
  },
];

Dati e colonne tabella2

const nomiColonne2 = ["id", "prodotto", "prezzo"];
const data2 = [
  {
    id: 1,
    prodotto: "hamburger",
    prezzo: 3.99,
  },
  {
    id: 1,
    prodotto: "hamburger",
    prezzo: 3.99,
  },
  {
    id: 1,
    prodotto: "hamburger",
    prezzo: 3.99,
  },
];

Generazione tabelle con dati e colonne

const tabella1 = new Tabella(nomiColonne1, data1);
const tabella2 = new Tabella(nomiColonne2, data2);