Maison  >  Article  >  interface Web  >  jquery ajoute un élément tr

jquery ajoute un élément tr

WBOY
WBOYoriginal
2023-05-28 19:13:411649parcourir

En tant que bibliothèque JavaScript couramment utilisée dans le développement front-end, jQuery présente une grande praticité et commodité dans les opérations DOM. Parmi eux, l'ajout dynamique d'éléments HTML est l'une des opérations courantes de jQuery, en particulier lors de l'exploitation de tables, l'ajout dynamique d'éléments a34de1251f0d9fe1e645927f19a896e8

Dans jQuery, il existe de nombreuses façons d'ajouter des éléments a34de1251f0d9fe1e645927f19a896e8. Ci-dessous, nous présenterons plusieurs méthodes courantes à titre de référence.

1. Utilisez la méthode append(). La méthode

append() peut ajouter le code ou l'élément HTML spécifié à la fin de l'élément existant. Par conséquent, nous pouvons utiliser la méthode append() pour ajouter un élément a34de1251f0d9fe1e645927f19a896e8 à f5d188ed2c074f8b944552db028f98a1. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      $("table").append("<tr><td>新行的单元格 1</td><td>新行的单元格 2</td></tr>");
   });
});

Dans l'exemple de code, lorsque vous cliquez sur le bouton, un nouveau a34de1251f0d9fe1e645927f19a896e8 sera ajouté à la table ;élément.

2. Utilisez la méthode eq() pour ajouter dynamiquement des lignes

La méthode eq() peut sélectionner des éléments à des positions d'index spécifiées dans la collection d'éléments correspondants. Par conséquent, nous pouvons d'abord obtenir l'élément a34de1251f0d9fe1e645927f19a896e8 spécifié, puis utiliser la méthode eq() pour le copier et l'insérer dans le tableau. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $cloneRow=$("table tr").eq(0).clone();
      $("table").append($cloneRow);
   });
});

Dans l'exemple de code, nous ajoutons l'élément a34de1251f0d9fe1e645927f19a896e8 premier élément du tableau a34de1251f0d9fe1e645927f19a896e8L'élément est copié et inséré dans le tableau.

3. Utilisez la méthode after() pour ajouter des lignes

La méthode after() peut insérer le code HTML ou l'élément spécifié après l'élément spécifié. Par conséquent, nous pouvons insérer un nouvel élément a34de1251f0d9fe1e645927f19a896e8 à la position spécifiée dans le tableau, l'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>");
      $("table tr:eq(0)").after($newRow);
   });
});

Dans l'exemple de code, nous insérons le nouvel élément a34de1251f0d9fe1e645927f19a896e8 table après l'élément ;tr>

4. Utilisez la méthode appendTo() pour ajouter des lignes

La méthode appendTo() peut insérer l'élément spécifié dans la position finale interne d'un autre élément spécifié. Par conséquent, nous pouvons d'abord créer un nouvel élément a34de1251f0d9fe1e645927f19a896e8 et l'insérer dans le document, puis utiliser la méthode appendTo() pour l'insérer dans le tableau. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>").appendTo("table");
   });
});

Dans l'exemple de code, nous créons d'abord un nouvel élément a34de1251f0d9fe1e645927f19a896e8 et l'insérons dans le tableau.

En développement réel, choisissez différentes méthodes en fonction des besoins spécifiques pour mettre en œuvre l'opération d'ajout d'éléments a34de1251f0d9fe1e645927f19a896e8 Quelle que soit la méthode utilisée, la flexibilité et la commodité de jQuery peuvent être utilisées pour modifier et développer dynamiquement des documents HTML. Dans le même temps, nous devons également veiller à définir correctement les attributs et les styles des éléments lors de l'ajout dynamique d'éléments afin de garantir la beauté globale de la page.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn