[DOM] Ajouter dynamiquement une zone de texte

Bonjour

Donc je veux réaliser un truc, comme koi quand je clique sur une image (+) j’aurais une zone de texte qui s’ajoute dans une cellule <td> et quand je clique sur une image (-) elle disparetra :mrgreen:


Avant le clique :

Code:

---

1 2 3

<table> <tr><td>Zone 1 :</td><td><input type="text" id="zone1"></td></tr> </table>

---

Apres :

Code:

---

1 2 3 4 5

<table> <tr><td>Zone 1 :</td><td><input type="text" id="zone1"></td></tr> <tr><td>Zone 2 :</td><td><input type="text" id="zone2"></td></tr>   </table>

---

merci d'avance

Bonjour,
soit plus précis : ton exemple (ajout d'une ligne <tr>) ne correspond pas à ce que tu dis (ajout d'un input dans un <td>) ...

A+

ok
remplacer

Citation:

---

ajout d'un input dans un <td>

---

par

Citation:

---

Ajouter cette portion de code <tr><td>Zone 2 :</td><td><input type="text" id="zone2"></td></tr>

---

:yaisse2:

Il faut utiliser dom,
exemple ajoutant une balise <TD> contenant du texte dans le premier <TR> d'une table identifiée:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// reccuperation table ayant comme id "id_table" aTableObj = document.getElementById("Id_table"); if (!aTableObj) return;   // reccuperation premier TR de cette table aTrObject = aTableObj.getElementsByTagName("TR").item(0); if (!aTrObject) return;     // creation de texte "blablabla" aText = document.createTextNode("blablabla"); // creation d'un TD aTd = document.createElement("TD"); // ajout de texte dans la balise TD aTd.appendChild(aText); // ajout du TD dans le TR aTrObject.appendChild(aTd);

---

ps: j'ai un peu modifié un code plus complexe que j'utilise donc peut etre introduit des erreur

@ Onclebob > le display="block"/"none" n'est-il pas plus adapté, dans le mesure où il faut pouvoir masquer/afficher.
La création / suppression effective va être un peu lourde, non ?

A+

Ca dépend, si la zone doit être ajouter dynamiquement de facon non défini a l'avance il vaut mieux passer par DOM.
Si le nombre est prédéfini mais qu'il faut juste montrer/cacher une zone le display:block/none est plus adapté oui.
J'avoue que je suis rester sur le mot "dynamiquement" du titre.

merci

j'ai trouvé aussi ca :

Code:

---

1 2 3 4 5

var link = document.createElement('a'); link.setAttribute('href', 'index.html'); link.appendChild(document.createTextNode('go home')); document.getElementById('content').appendChild(link);

---

:yaisse2:

et pour supprimer comment je peux faire ?

Citation:

---

Ajouter cette portion de code <tr><td>Zone 2 :</td><td><input type="text" id="zone2"></td></tr>

---

:koi:

Citation:

---

Envoyé par fadex

et pour supprimer comment je peus faire ?

---

Citation:

---

Envoyé par E.Bzz

le display="block"/"none" n'est-il pas plus adapté, dans le mesure où il faut pouvoir masquer/afficher.
La création / suppression effective va être un peu lourde, non ?

---

onclebob à dit :

Citation:

---

J'avoue que je suis rester sur le mot "dynamiquement" du titre.

---

... et comme le terme dynamique n'est pas du tout sujet à interprétation, effectivement, tout est limpide :mrgreen:

A+

il faut retrouver l'element que tu auras crée en Dom (en ayant pris le soin au moment de la creation de lui donner un ID par exemple) et en partant du parent (ici aTrObject) utiliser la methode: removeChild

http://developer.mozilla.org/en/docs...eChild#1029080

Edit: Effectivement le mot dynamique peut souvent porter a confusion dans le monde du javascript. Contenu dynamique ou animation dynamique ^^