Comment ajouter une ligne dans un tableau (table) en jQuery ? (réponse 1)

Il est possible en jQuery d'ajouter de nouvelles lignes à une table HTML. Pour cela, il faut faire attention à la structure de la table.

Il est possible en jQuery d'ajouter de nouvelles lignes à une table HTML. Pour cela, il faut faire attention à la structure de la table. Voici un exemple de structure d'une table HTML :

<table id=maTable>
 <tbody>
 <tr>
 <td>Bonjour</td>
 </tr>
 </tbody>
</table>

Cependant, il faut savoir que le tbody n'est pas obligatoire en HTML et qu'il n'est pas nécessairement présent sous la balise <table>. Mais une fois la page affichée dans le navigateur, la balise <tbody> sera ajoutée automatiquement à la table si elle n'est pas présente. Il faut donc bien tenir compte de cette balise dans le code JavaScript. La seule exception est la table vide où la balise <tbody> n'est pas rajoutée automatiquement. Il faut donc savoir adapter votre code au cas par cas. La solution la plus simple est de toujours mettre un tbody, même dans une table vide. De cette manière le code pour ajouter des lignes ne changera pas.

Afin d'ajouter des lignes, il faut sélectionner la balise <tbody> avec l'identifiant de la table et le sélecteur last qui va servir à sélectionner le dernier tbody de la table. Il n'y en a qu'un seul mais cette méthode permet de le sélectionner directement. On appelle ensuite la méthode append qui permet d'ajouter du code HTML à la suite du code HTML contenu dans la balise. De cette manière, on peut ajouter autant de lignes que l'on veut :

JQuery(#maTable > tbody:last).append(<tr>...</tr><tr>...</tr>);

JQuery