HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
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 deleteCell() de l'interface HTMLTableRowElement supprime une cellule spécifique d'une ligne donnée (<tr>).
deleteCell()
HTMLTableRowElement
<tr>
deleteCell(index)
index
L'indice de la cellule à supprimer. Si index vaut -1 ou est égal au nombre de cellules, la dernière cellule de la ligne est supprimée.
-1
Aucune (undefined).
undefined
IndexSizeError
DOMException
Levée si index est supérieur au nombre de cellules ou s'il est inférieur à -1.
Cet exemple utilise HTMLTableRowElement.insertCell() pour ajouter une nouvelle cellule à une ligne.
HTMLTableRowElement.insertCell()
<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; }
// 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(); });
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
HTMLTableElement.insertRow()
HTMLTableCellElement