HTMLTableRowElement : méthode insertCell()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La méthode insertCell() de l'interface HTMLTableRowElement insère une nouvelle cellule (<td>) dans une ligne de tableau (<tr>) et retourne une référence sur cette cellule.

Note : insertCell() insère directement la cellule dans la ligne. Il n'est pas nécessaire d'ajouter la cellule séparément avec Node.appendChild() comme cela aurait été le cas si Document.createElement() avait été utilisé pour créer le nouvel élément <td>.

Vous ne pouvez pas utiliser insertCell() pour créer un nouvel élément <th>.

Dans cet article

Syntaxe

js
insertCell()
insertCell(index)

html
<table>
  <thead>
    <tr>
      <th>C1</th>
      <th>C2</th>
      <th>C3</th>
      <th>C4</th>
      <th>C5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cellule 1</td>
      <td>Cellule 2</td>
    </tr>
  </tbody>
</table>

<button id="add">Ajouter une cellule</button>
<button id="remove">Supprimer la dernière cellule</button>
<div>La première ligne contient <output>2</output> cellule(s).</div>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

js
// Obtenir les éléments d'interface pertinents
const bodySection = document.querySelectorAll("tbody")[0];
const row = bodySection.rows[0]; // Sélectionner la première ligne de la section tbody
const cells = row.cells; // La collection est dynamique, donc toujours à jour
const cellNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateCellNumber() {
  cellNumberDisplay.textContent = cells.length;
}

addButton.addEventListener("click", () => {
  // Ajouter une nouvelle cellule à la fin de la première ligne
  const newCell = row.insertCell();
  newCell.textContent = `Cellule ${cells.length}`;

  // Mettre à jour le compteur de cellules
  updateCellNumber();
});

removeButton.addEventListener("click", () => {
  // Supprimer la cellule de la ligne
  row.deleteCell(-1);

  // Mettre à jour le compteur de cellules
  updateCellNumber();
});

La méthode HTMLTableElement.insertRow()
L'élément HTML représentant les cellules : HTMLTableCellElement

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 19 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLTableRowElement
Propriétés d'instance
Méthodes d'instance
1. deleteCell()
2. insertCell()
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLTableRowElement : méthode insertCell()

Dans cet article

Syntaxe

Paramètres

Valeur de retour

Exemples

HTML

JavaScript

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN