Créer un tableau à l'aide de JavaScript

Créez un tableau HTML à partir de données JavaScript en construisant ses éléments avec document.createElement(), en définissant le texte des cellules avec textContent, puis en ajoutant le tableau terminé à un conteneur de la page avec appendChild(). Cette méthode convient lorsque les lignes proviennent de données qui changent pendant l’exécution de la page.

Structure d’un tableau HTML et éléments nécessaires

Un tableau utilise des éléments imbriqués pour décrire son contenu. L’élément table contient des lignes (tr), et chaque ligne contient des cellules d’en-tête (th) ou des cellules de données (td). Utilisez th pour une cellule qui désigne une ligne ou une colonne, et td pour les données ordinaires. Les cellules d’en-tête ne sont pas limitées à thead : elles peuvent aussi servir à désigner des lignes dans le corps du tableau.

Les éléments thead et tbody regroupent respectivement les lignes d’en-tête et celles du corps. Ils facilitent l’organisation des grands tableaux, mais ne sont pas indispensables dans tous les tableaux. Un groupe tfoot peut contenir des lignes de résumé ou de pied de tableau, si nécessaire. Pour un petit tableau, la structure essentielle est un élément table avec ses lignes et ses cellules ; ajoutez des éléments de regroupement lorsqu’ils rendent la structure plus claire.

Créer et remplir un tableau avec JavaScript

L’exemple ci-dessous crée une ligne d’en-tête et deux lignes de données. Le tableau comporte trois colonnes — numéro, nom et entreprise — et place du texte ordinaire dans chaque cellule au moyen de textContent. Les valeurs sont ainsi traitées comme du texte, sans être interprétées comme du HTML : c’est le choix le plus sûr par défaut pour des données susceptibles de contenir des saisies utilisateur.

L’exemple destiné au navigateur utilise le DOM natif et ajoute le tableau terminé à un élément #table-container déjà présent. La démonstration Node.js séparée qui suit utilise un petit modèle reprenant la forme du DOM pour illustrer la création des lignes et leurs décomptes ; elle ne crée pas de tableau visible dans un navigateur.

Exemple de page pour navigateur (enregistrez-le dans un fichier HTML, puis ouvrez celui-ci dans un navigateur) :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

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

Exécutez cet exemple JavaScript autonome :

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() reçoit un nom d’élément sous forme de chaîne et renvoie un nouvel élément. Le code crée un tr pour chaque ligne, puis y ajoute des cellules th ou td. Chaque cellule est remplie avant que sa ligne soit placée dans thead ou tbody. Enfin, ces groupes sont insérés dans le tableau, qui est ensuite ajouté au conteneur créé au début de l’exemple.

Pour une page que vous contrôlez, le conteneur peut être aussi simple que <div id="table-container"></div>. Dans le code du navigateur, sélectionnez cet élément existant avec document.getElementById("table-container"), puis ajoutez-y le tableau terminé. Placez le script après le conteneur dans la page, ou exécutez-le une fois le document chargé, afin que l’élément cible existe. Gérez séparément la présentation avec CSS, par exemple en appliquant des bordures et des marges intérieures à table, th et td : JavaScript crée la structure et le contenu, tandis que CSS en contrôle l’apparence.

Ajouter le tableau au DOM et vérifier le résultat

Ajoutez le tableau terminé au conteneur sélectionné avec container.appendChild(table). Le tableau est ainsi inséré dans ce conteneur sans modifier le reste de la page. Si vous souhaitez remplacer le contenu existant, effacez-le délibérément avant l’ajout ; sinon, chaque exécution ajoutera un nouveau tableau.

Pour vérifier le résultat, ouvrez les outils de développement du navigateur et examinez le conteneur dans le panneau Elements. Il devrait contenir un élément table, avec un thead comprenant une ligne de trois cellules th et un tbody comprenant deux lignes de trois cellules td chacune. Le tableau affiché devrait présenter les en-têtes « No. », « Name » et « Company », suivis de James Clerk / Netflix et Adam White / Microsoft. Ces libellés de l’exemple restent en anglais. Si le tableau n’apparaît pas, vérifiez l’identifiant du conteneur et le moment où le script s’exécute. Pour les valeurs en texte brut, continuez d’utiliser textContent au lieu d’affecter les données à innerHTML.