Crea tabella usando JavaScript

Crea una tabella HTML a partire da dati JavaScript costruendo gli elementi con document.createElement(), impostando il testo delle celle con textContent e aggiungendo la tabella completa a un contenitore della pagina con appendChild(). Questo approccio è utile quando le righe provengono da dati che cambiano mentre la pagina è in esecuzione.

Struttura delle tabelle HTML ed elementi necessari

Una tabella usa elementi annidati per descriverne il contenuto. L’elemento table contiene le righe (tr); ogni riga contiene celle di intestazione (th) oppure celle di dati (td). Usa th per una cella che identifica una riga o una colonna e td per i dati ordinari. Le celle di intestazione non sono limitate a thead: possono anche identificare righe nel corpo della tabella.

Gli elementi thead e tbody raggruppano rispettivamente le righe di intestazione e quelle del corpo. Aiutano a organizzare le tabelle più grandi, ma non sono obbligatori in ogni tabella. Se necessario, un gruppo tfoot può contenere righe di riepilogo o piè di tabella. Per una tabella piccola, la struttura essenziale è un table con le relative righe e celle; aggiungi gli elementi di raggruppamento quando rendono la struttura più chiara.

Crea e compila una tabella con JavaScript

L’esempio seguente crea una riga di intestazione e due righe di dati. La tabella ha tre colonne — numero, nome e azienda — e inserisce testo normale in ogni cella usando textContent. In questo modo i valori vengono trattati come testo anziché essere interpretati come HTML: è l’impostazione più sicura per dati che potrebbero contenere input dell’utente.

L’esempio per il browser usa il DOM nativo e aggiunge la tabella completata a un elemento #table-container già presente. La dimostrazione separata per Node.js che segue usa un semplice modello con struttura simile al DOM per mostrare la logica di costruzione delle righe e i relativi conteggi; non crea una tabella visibile nel browser.

Esempio di pagina per il browser (salvalo come pagina HTML e aprilo in un browser):

Il codice e le etichette o gli output visibili in questa sezione restano in inglese.

<!doctype html>
<html lang="en">
  <body>
    <div id="table-container"></div>
    <script>
      const container = document.getElementById("table-container");
      const table = document.createElement("table");
      const thead = document.createElement("thead");
      const tbody = document.createElement("tbody");
      const headings = ["No.", "Name", "Company"];
      const records = [
        ["1", "James Clerk", "Netflix"],
        ["2", "Adam White", "Microsoft"]
      ];

      const headerRow = document.createElement("tr");
      for (const heading of headings) {
        const cell = document.createElement("th");
        cell.textContent = heading;
        headerRow.appendChild(cell);
      }
      thead.appendChild(headerRow);

      for (const record of records) {
        const row = document.createElement("tr");
        for (const value of record) {
          const cell = document.createElement("td");
          cell.textContent = value;
          row.appendChild(cell);
        }
        tbody.appendChild(row);
      }

      table.appendChild(thead);
      table.appendChild(tbody);
      container.appendChild(table);
    </script>
  </body>
</html>

Esegui questo esempio JavaScript autonomo:

class Element {
  constructor(name) {
    this.name = name;
    this.children = [];
    this.textContent = "";
  }

  appendChild(child) {
    this.children.push(child);
    return child;
  }
}

const document = {
  createElement(name) {
    return new Element(name);
  },
  body: new Element("body")
};

const container = document.createElement("div");
container.id = "table-container";
document.body.appendChild(container);

const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headings = ["No.", "Name", "Company"];
const records = [
  ["1", "James Clerk", "Netflix"],
  ["2", "Adam White", "Microsoft"]
];

const headerRow = document.createElement("tr");
for (const heading of headings) {
  const cell = document.createElement("th");
  cell.textContent = heading;
  headerRow.appendChild(cell);
}
thead.appendChild(headerRow);

for (const record of records) {
  const row = document.createElement("tr");
  for (const value of record) {
    const cell = document.createElement("td");
    cell.textContent = value;
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);

const tableElement = container.children[0];
const headerCells = tableElement.children[0].children[0].children;
const bodyRows = tableElement.children[1].children;
console.log(`${headerCells.length} headings, ${bodyRows.length} data rows`);

3 headings, 2 data rows

document.createElement() riceve il nome di un elemento come stringa e restituisce un nuovo elemento. Il codice crea un tr per ogni riga, poi vi aggiunge celle th o td. Ogni cella viene compilata prima che la riga sia inserita in thead o tbody. Infine, i gruppi vengono inseriti nella tabella e la tabella viene aggiunta al contenitore creato all’inizio dell’esempio.

Per una pagina che controlli, il contenitore può essere semplicemente <div id="table-container"></div>. Nel codice per il browser, seleziona l’elemento esistente con document.getElementById("table-container") e aggiungici la tabella completata. Inserisci lo script dopo il contenitore nella pagina oppure eseguilo dopo il caricamento del documento, così l’elemento di destinazione sarà disponibile. Aggiungi la presentazione separatamente con CSS, per esempio applicando bordi e spaziatura interna a table, th e td: JavaScript crea la struttura e il contenuto, mentre CSS ne controlla l’aspetto.

Aggiungi e verifica la tabella nel DOM

Aggiungi la tabella completata al contenitore selezionato con container.appendChild(table). La tabella viene inserita nel contenitore e il resto della pagina rimane al suo posto. Se la tabella deve sostituire il contenuto esistente, cancellalo intenzionalmente prima di aggiungerla; altrimenti, a ogni esecuzione verrà aggiunta un’altra tabella.

Per verificare il risultato, apri gli strumenti per sviluppatori del browser e ispeziona il contenitore nel pannello Elements. Dovrebbe contenere un table, con un thead che include una riga di tre celle th e un tbody con due righe, ciascuna composta da tre celle td. La tabella visualizzata dovrebbe mostrare le intestazioni «No.», «Name» e «Company», seguite da James Clerk / Netflix e Adam White / Microsoft. Le tre intestazioni restano in inglese nell’esempio invariato. Se la tabella non compare, verifica l’ID del contenitore e il momento in cui viene eseguito lo script. Per i valori di testo semplice, continua a usare textContent invece di assegnare i dati a innerHTML.