Comment supprimer une colonne d'un tableau HTML en utilisant JavaScript ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-23 23:57:06

avant

852 Les gens l'ont consulté

如何使用 JavaScript 从 HTML 表中删除列？

En HTML, les tableaux sont utilisés pour afficher des données sur une page Web de manière formatée. Le tableau contient des colonnes et des lignes qui affichent des données.

Parfois, les développeurs doivent supprimer des colonnes de tableau ou autoriser les utilisateurs à les supprimer. Par exemple, ce tableau contient des données utilisateur et comporte des colonnes « âge » et « anniversaire ». Dans ce cas, nous devons supprimer la colonne « Âge » puisque nous pouvons obtenir l'âge à partir de la colonne « Anniversaire ».

Les développeurs peuvent supprimer n'importe quelle colonne spécifique à l'aide de la méthode deleteCell(). Dans ce didacticiel, nous apprendrons à supprimer des colonnes de table par index, nom de classe et nom de colonne. De plus, les développeurs doivent se rappeler que les colonnes des tableaux sont des index de base zéro.

Grammaire

Les utilisateurs peuvent supprimer n'importe quelle colonne spécifique du tableau à l'aide de la méthode deleteCell() selon la syntaxe suivante.

for (var i = 0; i < rowCount; i++) {
   table.rows[i].deleteCell(index);
}

Copier après la connexion

Dans la syntaxe ci-dessus, nous parcourons chaque ligne du tableau et supprimons la cellule de "l'index". Ici, « index » est l’index de la colonne à supprimer.

Exemple 1 (Supprimer la colonne du tableau par index)

Dans l'exemple ci-dessous, nous avons créé un tableau contenant des numéros de mots. De plus, nous stylisons le tableau en fournissant des bordures en CSS. Chaque fois que l'utilisateur clique sur le bouton, nous exécutons la fonction deleteColumn().

Dans la fonction deleteColumn(), nous utilisons id pour accéder à la table. De plus, nous utilisons la propriété "rows" pour obtenir toutes les lignes du tableau et utilisons la propriété "length" du tableau pour calculer le nombre total de lignes.

On initialise la variable « index » à 2 pour supprimer la troisième colonne. Après cela, nous utilisons une boucle for pour parcourir toutes les lignes du tableau. Nous utilisons la méthode deleteCell() pour supprimer la troisième cellule de chaque ligne.

Dans la sortie, l'utilisateur peut cliquer sur le bouton pour supprimer la troisième colonne du tableau.

<html>
<head>
   <style>
      table {
          border-collapse: collapse;
        }
        td,
        th {
            border: 1px solid black;
            padding: 8px;
        }
   </style>
</head>
<body>
   <h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
   <table id = "test">
      <tr>
         <th> First </th>
         <th> Second </th>
         <th> Third </th>
         <th> Fourth </th>
      </tr>
      <tr>
         <td> 1 </td>
         <td> 2 </td>
         <td> 3 </td>
         <td> 4 </td>
      </tr>
      <tr>
          <td> 5 </td>
          <td> 6 </td>
          <td> 7 </td>
          <td> 8 </td>
      </tr>
      <tr>
          <td> 9 </td>
          <td> 10 </td>
          <td> 11 </td>
          <td> 12 </td>
      </tr>
    </table>
    <br> <br>
    <button onclick = "deleteColumn()"> Delete Column </button>
    <script>
        function deleteColumn() {
            var table = document.getElementById("test");
            var rowCount = table.rows.length;
            let index = 2;
            for (var i = 0; i < rowCount; i++) {
                table.rows[i].deleteCell(index);
            }
        }
   </script>
</html>

Copier après la connexion

Exemple 2 (Supprimer la colonne du tableau par le texte d'en-tête)

Dans l'exemple ci-dessous, nous avons créé un tableau contenant des données alimentaires. Dans cet exemple, nous supprimons une colonne de tableau en utilisant le texte d'en-tête.

Dans la fonction deleteColum(), on accède au titre du tableau. Après cela, nous accédons à toutes les lignes d’en-tête. Ensuite, nous parcourons les lignes d'en-tête et trouvons l'index d'en-tête qui contient « Calories » comme code HTML interne.

Après avoir trouvé l'index de la colonne, nous pouvons utiliser une boucle for et la méthode tableCell() pour supprimer des cellules spécifiques de chaque ligne, comme nous l'avons fait dans le premier exemple.

Dans la sortie, l'utilisateur doit cliquer sur le bouton pour supprimer la colonne « Calories ».

<html>
<head>
   <style>
       table {border-collapse: collapse;}
       td, th {border: 1px solid black; padding: 8px; }
   </style>
</head>
<body>
   <h3>Using the <i>deleteCell() method</i> to delete the table columns using JavaScript </h3>
   <table id="food">
      <tr> 
         <th>Food Name</th>
         <th>Price</th>
         <th>Calories</th>
      </tr>
      <tr>
          <td>Apple</td>
          <td>99</td>
          <td>95</td>
      </tr>
      <tr>
          <td>Banana</td>
          <td>89</td>
          <td>105</td>
      </tr>
      <tr>
          <td>Orange</td>
          <td>79</td>
          <td>85</td>
      </tr>
   </table>
   <br> <br>
   <script>
      function deleteColumn() {
         //  get a table
         var table = document.getElementById('food');
         // get header row
         var headerRow = table.getElementsByTagName('tr')[0];
         // get headers
         var headers = headerRow.getElementsByTagName('th');
         // find column index
         for (var i = 0; i < headers.length; i++) {
             if (headers[i].innerHTML === "Calories") {
                var columnIndex = i;
                break;
                }
            }
            // use column index to delete cells
            if (columnIndex !== undefined) {
               var rowCount = table.rows.length;
               for (var i = 0; i < rowCount; i++) {
               table.rows[i].deleteCell(columnIndex);
                }
            }
        }
   </script>
   <button onclick="deleteColumn()">Delete Column</button>
</body>
</html>

Copier après la connexion

Exemple 3 (Supprimer plusieurs colonnes de tableau par nom de classe)

Dans l'exemple suivant, nous apprendrons à supprimer plusieurs colonnes d'un tableau en utilisant le nom de la classe.

Ici, nous accédons d'abord à toutes les lignes du tableau, puis nous les parcourons à l'aide d'une boucle for. Après cela, nous accédons à toutes les cellules d'une ligne spécifique qui contiennent le nom de la classe "extra". Nous utilisons une boucle while pour parcourir toutes les cellules et supprimer toutes les cellules une par une en utilisant "cells[0].parentNode.removeChild(cells[0])".

Dans le code ci-dessus, cell[0] est la cellule actuelle. "parentNode" fait référence à sa ligne à partir de laquelle la méthode RemoveChild() supprime le nœud enfant.

Dans la sortie, l'utilisateur peut supprimer plusieurs colonnes du tableau en cliquant sur le bouton.

<html>
<head>
    <style>
        table { border-collapse: collapse;}
        td, th {border: 1px solid black; padding: 8px;}
    </style>
</head>
<body>
    <h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
    <table id = "HTMLtable">
        <tr>
            <th> Column 1 </th>
            <th class = "extra"> Column 2 </th>
            <th >Column 3 </th>
            <th class = "extra"> Column 4 </th>
        </tr>
        <tr>
            <td> Row 1, Column 1 </td>
            <td class = "extra"> Row 1, Column 2 </td>
            <td> Row 1, Column 3 </td>
            <td class = "extra"> Row 1, Column 4 </td>
        </tr>
        <tr>
            <td> Row 2, Column 1 </td>
            <td class = "extra"> Row 2, Column 2 </td>
            <td> Row 2, Column 3 </td>
            <td class = "extra"> Row 2, Column 4 </td>
        </tr>
        <tr> 
            <td> Row 3, Column 1 </td>
            <td class = "extra"> Row 3, Column 2 </td>
            <td> Row 3, Column 3 </td>
            <td class = "extra"> Row 3, Column 4 </td>
    </table>  <br> <br>
    <button onclick="deleteColumn()"> Delete Column </button>
    <script>
        function deleteColumn() {
            var table = document.getElementById('HTMLtable');
            var rows = table.getElementsByTagName('tr');
            // iterate through rows
            for (var i = 0; i < rows.length; i++) {
                // get cells with className 'extra'
                var cells = rows[i].getElementsByClassName('extra');
                // delete cells 
                while (cells.length > 0) {
                    cells[0].parentNode.removeChild(cells[0]);
                }
            }
        }
    </script>
</html>

Copier après la connexion

Nous avons appris à supprimer des colonnes d'un tableau en utilisant JavaScript. Nous avons utilisé la méthode deleteCeil() dans les 2 premiers exemples en passant l'index de la colonne en paramètre. Dans le troisième exemple, nous utilisons la méthode RemoveChild() pour supprimer une cellule spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!