Discussion :

[Tententai]

Bonjour,

Je voudrais utiliser Ajax pour rajouter des lignes dans une table html.

Je sais déjà faire quelquechose de similaire :
- récupérer du html sous forme de texte dans le xhr.responseText
- le mettre en tant que innerHTML dans un élément de mon document d'origine

Mais ça ne marche pas bien avec des <tr>... à quoi les rattacher ?

Comment récupérer qqch comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<tr><td>blabla</td></tr>
<tr><td>blabla</td></tr>

Et l'insérer à un endroit voulu dans une table ?

[Shinuza]

Bonjour,

Je voudrais utiliser Ajax pour rajouter des lignes dans une table html.

Je sais déjà faire quelquechose de similaire :
- récupérer du html sous forme de texte dans le xhr.responseText
- le mettre en tant que innerHTML dans un élément de mon document d'origine

Mais ça ne marche pas bien avec des <tr>... à quoi les rattacher ?

Comment récupérer qqch comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<tr><td>blabla</td></tr>
<tr><td>blabla</td></tr>

Et l'insérer à un endroit voulu dans une table ?

Ca dépend de la structure de ta table, mais c'est simplissime, le tout étant de créer toutes tes lignes hors dom et de les écrire une fois le traitement terminé

[Tententai]

Par exemple, j'ai une table comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<table id="maTable">>
   <tr id="maLigne1" onClick="javascript:insertion()">
       <td>Blabla</td>
   </tr>
   <tr id="maLigne2">
       <td>Blabla</td>
   </tr>
</table>

Quand je clique sur la première ligne, une fonction javascript va lancer une requête au serveur, et récupérer dans responseText du html à insérer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<tr><td>Bonjour du serveur</td></tr>

Jusqu'ici tout va bien. Ce que je ne sais pas faire, c'est insérer cette nouvelle ligne dans ma table d'origine, après la première ligne.

[Shinuza]

Salut,

Voir ici :

http://developer.mozilla.org/en/docs...t.insertBefore

[Tententai]

Ah cool merci, c'est ce que je voulais savoir . En fait c'était plus un pb de Javascript que d'Ajax.