FR
RU
EN
ES
ZH
DE
PT
AR
HI
Comment ajouter une ligne à un tableau avec jQuery : guide complet
\n\nTravailler avec des tableaux HTML est l'une des tâches les plus courantes pour un développeur frontend. Et l'ajout dynamique de nouvelles lignes dans un tableau est un grand classique. Imaginez : vous créez une boutique en ligne, un panneau d'administration pour un blog ou un système de gestion de tâches. Presque toujours, l'utilisateur doit pouvoir cliquer sur un bouton « Ajouter » — et une nouvelle entrée apparaît dans le tableau.
\n\nAujourd'hui, nous allons voir en détail comment ajouter une ligne de tableau en jQuery. Ce n'est pas une simple théorie aride, mais un tutoriel pratique étape par étape avec des exemples de code concrets. Vous découvrirez les méthodes les plus populaires, les pièges à éviter et les meilleures pratiques. C'est parti !
\n\nPourquoi jQuery plutôt que du JavaScript pur ?
\n\nLa question est légitime. Oui, le JavaScript natif sait manipuler le DOM depuis longtemps, et la méthode document.createElement n'a pas été supprimée. Mais apprendre à ajouter une ligne de tableau avec jQuery est plus rapide et plus simple, surtout si vous êtes débutant. jQuery gère la compatibilité entre navigateurs et offre une syntaxe élégante. De plus, des millions de lignes de code en production sont écrites en jQuery — et il faut les maintenir. Par conséquent, connaître ces techniques est une compétence obligatoire pour tout développeur web.
HTML de base pour nos expériences
\n\nPour commencer, nous aurons besoin d'un tableau simple. Voici son balisage — copiez-le dans votre fichier HTML ou dans un bac à sable comme CodePen.
\n\n\n<!DOCTYPE html>\n<html lang="fr">\n<head>\n <meta charset="UTF-8">\n <title>Ajouter une ligne à un tableau jQuery</title>\n <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n\n<h2>Liste des employés</h2>\n<table id="employees" border="1">\n <thead>\n <tr>\n <th>Nom</th>\n <th>Poste</th>\n <th>Salaire</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Anna</td>\n <td>Développeur</td>\n <td>150 000 ₽</td>\n </tr>\n <tr>\n <td>Ivan</td>\n <td>Designer</td>\n <td>120 000 ₽</td>\n </tr>\n </tbody>\n</table>\n\n<button id="addRow">Ajouter une ligne</button>\n\n<script>\n// Notre code jQuery sera ici\n</script>\n\n</body>\n</html>\nRemarquez : le tableau a un thead (en-tête) et un tbody (corps). C'est une structure sémantique correcte. L'ajout d'une ligne de tableau en jQuery se fera dans le tbody, et non dans le tableau lui-même — ainsi, nous ne casserons pas les en-têtes.
Méthode n°1 : jQuery append — le classique
\n\nLa méthode la plus populaire est d'utiliser .append(). Elle ajoute le contenu à la fin de l'élément sélectionné. Dans notre cas, à la fin du tbody.
Supposons que nous voulions ajouter un nouvel employé. Le code sera le suivant :
\n\n\n$('#addRow').on('click', function() {\n var newRow = '<tr>' +\n '<td>Pierre</td>' +\n '<td>Manager</td>' +\n '<td>100 000 ₽</td>' +\n '</tr>';\n $('#employees tbody').append(newRow);\n});\nTout est génialement simple : nous construisons une chaîne HTML avec la nouvelle ligne de tableau et nous l'insérons avec la méthode jQuery ajouter ligne tableau via append. Désormais, à chaque clic sur le bouton, Pierre le manager apparaît dans le tableau.
Important : si vous n'avez pas de tbody dans votre balisage, jQuery peut ajouter la ligne directement dans le table, mais dans ce cas, elle pourrait être insérée au mauvais endroit. Utilisez toujours tbody !
