Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
HTMLTableRowElement : méthode deleteCell()
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 deleteCell() de l'interface HTMLTableRowElement supprime une cellule spécifique d'une ligne donnée (<tr>).
Syntaxe
deleteCell(index)
Paramètres
index-
L'indice de la cellule à supprimer. Si
indexvaut-1ou est égal au nombre de cellules, la dernière cellule de la ligne est supprimée.
Valeur de retour
Aucune (undefined).
Exceptions
IndexSizeErrorDOMException-
Levée si
indexest supérieur au nombre de cellules ou s'il est inférieur à-1.
Exemples
Cet exemple utilise HTMLTableRowElement.insertCell() pour ajouter une nouvelle cellule à une ligne.
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
// 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();
});
Résultat
Spécifications
| Spécification |
|---|
| HTML # dom-tr-deletecell |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- La méthode
HTMLTableElement.insertRow() - L'élément HTML représentant les cellules :
HTMLTableCellElement
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.