Comment ajouter ou supprimer des lignes dans un Tableau en jQuery
Vous pouvez utiliser la méthode .append() de jQuery pour ajouter des lignes dans un tableau HTML. De la même manière, vous pouvez utiliser la méthode .remove() pour supprimer des lignes d’un tableau HTML avec jQuery.
Code HTML:
<html> <head> <style type="text/css"> /* Mettez le code CSS ici. */ </style> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // Mettez le code javascript ici. </script> </head> <body> <input type="text" id="nom" placeholder="Nom"> <input type="text" id="email" placeholder="Adresse email"> <input type="button" class="add" value="Ajouter une ligne"> <table class="test"> <tr> <th>Sélectionner</th> <th>Nom</th> <th>Email</th> </tr> <tr> <td><input type="checkbox" name="select"></td> <td>Thomas Babtise</td> <td>[email protected]</td> </tr> </table> <button type="button" class="delete">Supprimer une ligne</button> </body> </html>
Code jQuery:
$(document).ready(function() { $(".add").click(function() { var nom = $("#nom").val(); var email = $("#email").val(); var ligne = "<tr><td><input type='checkbox' name='select'></td><td>" + nom + "</td><td>" + email + "</td></tr>"; $("table.test").append(ligne); }); $(".delete").click(function() { $("table.test").find('input[name="select"]').each(function() { if ($(this).is(":checked")) { $(this).parents("table.test tr").remove(); } }); }); });
Code CSS:
table { margin: 18px 0; width: 100%; border-collapse: collapse; } table th, table td { text-align: left; padding: 6px; } table, th, td { border: 1px solid #000; }
Résultat | ||||||
---|---|---|---|---|---|---|
|
Le code ne fonctionne pas. En fait, j’ai recopie tout le code et ni le premier bouton et le deuxième bouton ne fonction. J’aimerai savoir, comment remplacer le checkbox par un icone fontawesome. Merci
Merci pour cette remarque, c’est corrigé 🙂
Pour remplacer le checkbox par un icone fontawesome, je vous recommande ce tutoriel.
Bonsoir,
J’ai copier/coller tout les codes en les plaçant au bon endroit comme indiquer, et le code ne marche malheureusement pas.
Êtes-vous sur que c’est le bon code ?
Ou auriez-vous une solution à me proposer ?
Cordialement,
Tom.
Re-Bonsoir,
Enfaite c’est moi qui me suis trompé, j’ai mal copier le code JavaScript.
Excusez-moi de vous avoir déranger.
Bonne soirée.
Pas de souci, vous êtes le bienvenu 🙂
Bonjour,
Merci car cela m’a vraiment beaucoup aidé !
Et si je souhaite ajouter plusieurs lignes de tableau en même temps ?
Car là, c’est bien ligne par ligne. J’ai adapté ce code à mon usage mais c’est vrai que si je pouvais ajouter plusieurs lignes à la fois, ce serait super!
Une piste ?
Merci et bonne journée
Avec plaisir !
Oui, c’est possible d’ajouter plusieurs lignes de tableau en même temps en spécifiant le nombre de lignes, essayer d’adapter ce code à vos besoins.
j’espère que cela pourra vous aider.
Salut j’espère que vous allé bien, j’aimerais récupérer ses valeurs lors d’un envoi de formulaire php mais je n’arrive pas
J’ai besoin d’aide
Salut c’est encore moi problème précédent résolut;
mais je n’arrive pas à utiliser ton code sans la source ce qui dit connexion , Ya t-il un moyen d’héberger la source en local ?