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
Sélectionner Nom Email
Thomas Babtise [email protected]
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

9 réflexions sur “Comment ajouter ou supprimer des lignes dans un Tableau en jQuery

  • février 8, 2020 à 5:54
    Permalien

    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

    Répondre
    • février 8, 2020 à 2:03
      Permalien

      Merci pour cette remarque, c’est corrigé 🙂
      Pour remplacer le checkbox par un icone fontawesome, je vous recommande ce tutoriel.

      Répondre
  • février 17, 2020 à 7:37
    Permalien

    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.

    Répondre
  • février 17, 2020 à 7:40
    Permalien

    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.

    Répondre
    • février 17, 2020 à 8:00
      Permalien

      Pas de souci, vous êtes le bienvenu 🙂

      Répondre
  • avril 1, 2020 à 8:46
    Permalien

    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

    Répondre
    • avril 1, 2020 à 12:25
      Permalien

      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.

      Répondre
  • août 6, 2021 à 3:51
    Permalien

    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

    Répondre
  • août 6, 2021 à 8:27
    Permalien

    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 ?

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *