HTMLTableRowElement : méthode insertCell()

Baseline Widely available

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

Syntaxe

insertCell()
insertCell(index)

Paramètres

index Facultatif: L'index de la nouvelle cellule. Si index vaut -1 ou est égal au nombre de cellules, la cellule est ajoutée à la fin de la ligne. Si index est omis, la valeur par défaut est -1.

<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

// 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();
});