Utilisez jQuery pour ajouter automatiquement des lignes de tableau dynamique

Titre : Utilisez jQuery pour ajouter dynamiquement des lignes et créer des tableaux dynamiques

Dans le développement Web, l'ajout dynamique de lignes est une exigence courante, en particulier lors de la création de tableaux. Grâce aux fonctions puissantes de jQuery, nous pouvons facilement ajouter des lignes de manière dynamique et créer des tableaux dynamiques. Ensuite, nous montrerons comment implémenter cette fonctionnalité à travers des exemples de code spécifiques.

Tout d'abord, assurez-vous d'avoir introduit jQuery dans votre projet. S'il n'est pas introduit, il peut l'être via la méthode CDN suivante :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Ensuite, nous montrerons un exemple simple pour créer une table dynamique contenant le nom et l'âge. Nous déclenchons l'ajout dynamique de lignes via un bouton.

    
    
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


    

        

            
姓名
            
年龄
        
    
    增加行

    <script>
        $(document).ready(function(){
            $("#addRow").click(function(){
                $("#myTable").append("<tr><td><input type='text' name='name'></td><td><input type='text' name='age'></td></tr>");
            });
        });
    </script>

Dans le code ci-dessus, nous créons d'abord une table videmyTable，并定义了表头。然后创建了一个按钮addRow Lorsque le bouton est cliqué, jQuery écoutera l'événement de clic sur le bouton et déclenchera l'ajout d'une nouvelle ligne à la table. Chaque fois que vous cliquez sur le bouton, une ligne sera ajoutée contenant des zones de saisie pour le nom et l'âge.

Grâce aux exemples de code ci-dessus, nous avons implémenté avec succès la fonction d'ajout dynamique de lignes et de création de tables dynamiques à l'aide de jQuery. Cette méthode est non seulement simple et rapide, mais peut également répondre aux besoins de nombreuses tables dynamiques. J'espère que cet article vous sera utile. Si vous avez des questions, veuillez laisser un message pour en discuter.

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!