Comment ajouter, modifier et supprimer des lignes de tableau dans jQuery ?

À l'ère actuelle du développement Web, une gestion efficace et efficiente des tables est devenue très importante, en particulier lorsqu'il s'agit d'applications Web gourmandes en données. La possibilité d'ajouter, de modifier et de supprimer dynamiquement des lignes d'un tableau peut améliorer considérablement l'expérience utilisateur et rendre les applications plus interactives. Un moyen efficace d’y parvenir consiste à exploiter la puissance de jQuery. jQuery fournit de nombreuses fonctionnalités pour aider les développeurs à effectuer des opérations.

Lignes du tableau

Les lignes du tableau sont des collections de données interdépendantes, représentées par l'élément

en HTML. Il est utilisé pour regrouper des cellules (représentées par des éléments ) dans un tableau. Chaque élément est utilisé pour définir une ligne dans le tableau, et pour les tableaux multi-attributs, il contient généralement un ou plusieurs éléments .

Grammaire

$(selector).append(content)

La méthode append() dans jQuery est utilisée pour ajouter du contenu à la fin d'un élément, qu'il s'agisse d'un élément unique ou d'un groupe d'éléments. Le contenu peut être du texte, du HTML ou d'autres éléments.

Le contenu peut être des chaînes HTML, des éléments DOM ou des objets jQuery.

$(selector).find(selectCondition)

La fonction find() dans jQuery est utilisée pour rechercher et sélectionner les éléments descendants de l'élément sélectionné. Il recherche dans toute l'arborescence DOM l'élément sélectionné et renvoie tous les éléments correspondants dans un nouvel objet jQuery.

Où selectCondition est une chaîne représentant l'élément à sélectionner, comme un nom de classe ou de balise.

$(selctor).remove()

La méthode remove() dans jQuery est utilisée pour supprimer l'élément sélectionné et ses éléments enfants du DOM (Document Object Model).

Méthode

Pour effectuer des opérations sur les lignes d'un tableau à l'aide de jQuery, nous utiliserons une combinaison de méthodes jQuery et de techniques de manipulation DOM. Discutons des trois opérations que nous verrons dans cet article, à savoir l'ajout, la modification et la suppression de lignes séparément. Donc, en parlant de la première opération, c'est-à-dire l'ajout d'une nouvelle ligne au tableau, nous utiliserons la méthode append() mentionnée ci-dessus. Pour ce faire, nous allons d’abord construire un nouvel élément puis l’insérer dans le tableau à l’aide de la méthode append().

Nous remplirons ensuite la nouvelle ligne avec le nouvel élément et lui attribuerons une valeur en utilisant la méthode text() ou html(). Maintenant, pour la deuxième opération, qui consiste à modifier la ligne du tableau, nous utilisons d'abord la méthode find() pour sélectionner les éléments pertinents dans la ligne, puis utilisons la méthode text() ou html() pour modifier leur contenu. Enfin, pour effectuer l'opération finale, qui consiste à supprimer la ligne du tableau, on utilise simplement la méthode remove() sur la ligne que l'on souhaite supprimer.

Mais avant de commencer à expliquer toutes les parties, je tiens d'abord à attirer votre attention sur le fait que pour inclure jQuery dans mes pages Web, j'utilise un CDN, que vous pouvez voir dans la balise script.

Revenons maintenant au code, discutons d'abord de l'élément body. Le corps contient une table virtuelle avec deux lignes et deux colonnes. En dehors de cela, il contient également trois boutons intitulés "Ajouter une ligne", "Supprimer une ligne" et "Modifier une ligne" que nous utiliserons plus tard dans le script pour ajouter la fonctionnalité requise au code. J'ai également utilisé CSS pour ajouter du style afin d'améliorer l'apparence des lignes du tableau. Enfin dans la partie scripting, j'ai écrit la logique de toutes les fonctions en utilisant jQuery. J'ai utilisé toutes les fonctions ci-dessus pour réaliser cette fonctionnalité. Cette fonctionnalité a été implémentée à l'aide de gestionnaires d'événements jQuery, qui sont déclenchés lorsque vous cliquez sur le bouton correspondant.

Exemple

Voici le code complet que nous utiliserons dans cet exemple -

<!DOCTYPE html>
<html>
<head>
   <title>How to Add Edit and Delete Table Row in jQuery?</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <style>
      table{
         border: 2px solid black
      }
      td{
         padding: 2px
      }
   </style>
</head>
<body>
   <h4>How to Add Edit and Delete Table Row in jQuery? </h4>
   <table id="my-table">
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
      <tr>
         <td>Original Row</td>
         <td>Data</td>
      </tr>
   </table>
   <br>
   <button id="add-btn">Add Row</button>
   <button id="remove-btn">Remove Row</button>
   <button id="edit-btn">Edit Row</button>
   <script>
      $(document).ready(function(){
         $("#add-btn").click(function(){
            var newRow = "<tr><td>New Row</td><td>Data</td></tr>";
            $("#my-table").append(newRow);
         });
         $("#remove-btn").click(function(){
            $("#my-table tr:last").remove();
         });
         $("#edit-btn").click(function(){
            let rows=$("#my-table").find("tr")
            let idx=Math.floor(Math.random()*rows.length)
            rows.eq(idx).find("td").eq(0).text("Edited Row")
         });
      });
   </script>
</body>
</html>

Conclusion

Dans cet article, nous avons introduit de nombreuses méthodes dans jQuery, à savoir append(), find() et remove(). Nous avons vu comment utiliser ces méthodes fournies par jQuery avec certaines techniques de manipulation DOM pour ajouter, modifier et supprimer dynamiquement des lignes de tableau.

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!