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électionnerNomEmail
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
Partagez cet article

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

  • Avatar
    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
  • Avatar
    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
  • Avatar
    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
  • Avatar
    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
    • Thomas Clavet
      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

Laisser un commentaire

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