Comment ajouter ou supprimer des lignes dans un Tableau en jQuery

juillet 4, 2019février 10, 2020 Amine KOUIS 9 Commentaires

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]

QCMs qui pourraient vous intéresser :

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

Malumiere
février 8, 2020 à 5:54 am
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
- Thomas Clavet
  février 8, 2020 à 2:03 pm
  Permalien
  
  Merci pour cette remarque, c’est corrigé 🙂
  Pour remplacer le checkbox par un icone fontawesome, je vous recommande ce tutoriel.
  Répondre
Tom
février 17, 2020 à 7:37 pm
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
Tom
février 17, 2020 à 7:40 pm
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
- Thomas Clavet
  février 17, 2020 à 8:00 pm
  Permalien
  
  Pas de souci, vous êtes le bienvenu 🙂
  Répondre
chuk
avril 1, 2020 à 8:46 am
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 pm
  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
Mcire
août 6, 2021 à 3:51 am
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
Mcire
août 6, 2021 à 8:27 pm
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

Code HTML:

Code jQuery:

Code CSS:

Vous pourrez aussi aimer

Comment lier un évènement click à un élément HTML créé de façon dynamique – jQuery

Comment récupérer la valeur d’un textarea avec jQuery

Comment détecter la touche Entrée sur un champ de saisie en jQuery

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

Laisser un commentaire Annuler la réponse