[AJAX] Ajout de lignes

Bonjour à tous,

Ne sachant pas vraiment si c'était plus Ajax que JS, enfin pour ma part c'est de l'Ajax..

voila je vous explique mon pb (ne l'ayant pas trouvé via recherche)

J'ai un formulaire du type

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<form action="" method="post"> <table> <tr> <td>nom</td><td>prenom</td> </tr> <tr> <td><input type="text" value="prenom" name="prenom" /></td><td><input type="text" value="om" name="nom" /></td> </tr> <tr> <td><div id="input"></div></td> </tr> </table> <input name="button" type="button" class="input2" onclick="add_champs()" value="Ajouter un competiteur" /> </form>

---

et jour le .js :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

function add_champs() { if (document.getElementById) { document.getElementById("input").innerHTML = '</div></td></tr>prout \n<tr><td coldpan="4"><div id="input">pouet'; } else if (document.all) { document.all["input"].innerHTML = 'prout</div></td></tr> \n<tr><td coldpan="4"><div id="input">pouet'; }   }

---

Voila donc j'ai réécri vite fait le form mais normalement avec ça j'ai plus trop de pb. Le seul truc c'est que j'ai l'impression que le js me prend pour une buse car au final au lieu de m'afficher

Code:

---

1 2 3 4 5 6 7

<tr> <td coldpan="4><div id="input">'prout</div></td> </tr> <tr> <td coldpan="4"><div id="input">pouet</div></td> </tr>

---

j'ai ...

Code:

---

1 2 3 4 5

<tr> <td><div id="input">prout <tr><td coldpan="4"><div id="input">pouet</div></td></tr></div></td> </tr>

---

Le chaos total en clair...toutes mes balises sont bougées... comme si l'ajax décidait comment les mettre :aie: ... et je vois plus de solutions la ... :oops:

Merci d'avance :)

Euh... innerHTML veut bien dire ce qu'il veut dire : "contenu HTML", toi tu t'en sers pour modifier le contenu HTML d'un élément en dehors, normal que ça ne fonctionne pas.
En gros, il insère le contenuDANS la div et après se débrouille pour gérer les erreurs de syntaxe.

La solution est d'insérer le contenu de la div, puis d'ajouter un autre élément HTML dans le DOM.

En fait mon but est de tout mettre dans la div...

Enfin si tu as une solution plus optimisée pour ajouter des lignes à un tableau ...

Par exemple une combinaison de :

Code:

---

1 2 3 4

document.createElement('tr'); document.createElement('td'); appendChild(); insertBefore();

---

Mais sinon, pour ton innerHTML, le problème survient car tu fermes la balise div puis ta ligne de tableau, ce n'est donc plus du innerHTML puisque tu tentes d'ajouter du contenu en dehors de ton élément.

Ok merci je vais voir ca ... mais j'avoue qu'au niveau de l'ajax j'ai encore du boulot :s

Bonjour,
J'avais aussi le même problème, mais ensuite j'ai utilisé jQuery et on manipule facilement le tableau.

Code:

---

$('tbody').prepend('<tr><td>contenue</td></tr>')

---

Tu m'intéresses a :)

tu peux m'en dire plus ?

Citation:

---

Envoyé par andry.aime

Code:

---

1 2	$('tbody').prepend('<tr><td>contenue</td></tr>')

---

---

ca rajoute la ligne ou dans le tableau ? etc..

Oui mais en utilisant <tbody> pour le contenue du tableau. C'est ce que je fais. Mais tu devrais utiliser le Framework jQuery.

Je vais te montrer à quel point je suis nul en Ajax :D mais je ne connais pas le framwork jQuery ... :oops:

Tu telecharge jQuery et tu l'utilise dans ton fichier

Code:

---

<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>

---

tu ne fais qu'appeler ensuite la fonction

Code:

---

$('tbody').prepend('<tr><td>contenue</td></tr>')

---

pour mettre au début de la table ou bien

Code:

---

$('tbody').append('<tr><td>contenue</td></tr>')

---

pour mettre en fin.

ah.. ok je cherchais un truc beaucoup plus compliquer. Merci beaucoup ;)

Je vais tester ça ^^

Euh ... en fait j'essai de rajouter la ligne dans mon tableau :p le problème c'est que la ça fonctionne trop bien.... ca me rajoute le texte dans tous mes tableaux que j'ai dans ma page ... :oops:

Autant pour moi ...


En fait il suffisait de nommer enfin de donner un id à mon tableau et de l'appeler de la façon suivante :

Code:

---

1 2	$('#mon_tableau').prepend('<tr><td>contenue</td></tr>')

---