[DOM] Ajouter dynamiquement une zone de texte

Version imprimable

27/02/2007, 18h45
fadex

[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
27/02/2007, 18h50
E.Bzz

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+
28/02/2007, 10h41
fadex

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

28/02/2007, 11h53
E.Bzz

@ 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+
28/02/2007, 12h24
onclebob

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 ?

28/02/2007, 15h33
E.Bzz

Citation:

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

:koi:
28/02/2007, 15h35
E.Bzz

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 ?
28/02/2007, 15h36
fadex

onclebob à dit :

Citation:

J'avoue que je suis rester sur le mot "dynamiquement" du titre.
28/02/2007, 15h39
E.Bzz

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

A+
28/02/2007, 16h01
onclebob

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 ^^