Comment supprimer une colonne d'un tableau HTML en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-30 17:12:14

Question

Comment faire pour supprimer une colonne d'un tableau HTML en JavaScript ?

Réponse

Pour supprimer une colonne d'un tableau HTML, en JavaScript, vous pouvez utiliser l'interface HTMLTableRowElement, couplée à la fonction deleteCell.

Dans l'exemple ci-après, on crée une fonction avec en paramètre le numéro de la colonne à supprimer ; cette fonction est exécutée lorsqu'on clique sur un bouton.

La fonction identifie le tableau où supprimer la colonne via un ID préalablement attribué au tableau.

L'interface HTMLTableRowElement est utilisée pour identifier toutes les lignes du tableau : <tr>...</tr>.

On utilise ensuite une boucle for pour parcourir toutes les lignes du tableau, et la fonction deleteCell pour supprimer la colonne voulue et son contenu.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment supprimer une colonne d'un tableau HTML en JavaScript ?</title>
</head>  
<body>
<table id="tableau">
<tr>
  <th>colonne 0</th>
  <th>colonne 1</th>
  <th>colonne 2</th>
</tr>
<tr>
  <td>donnée 0</td>
  <td>donnée 1</td>
  <td>donnée 2</td>
</tr>
</table>
<br>
<button onclick="supprimerCol(2)">Supprimer colonne 2</button>
<script>
function supprimerCol(numColonne) {
var table = document.getElementById('tableau'); 
var lignes = table.rows;    
  for (var j = 0; j < lignes.length; j++) {
  lignes[j].deleteCell(numColonne);
  }
}
</script>
</body>
</html>