Discussion :

[fadex]

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


Avant le clique :

Code :

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

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

Apres :

Code :

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

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

[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+

[fadex]

ok
remplacer

ajout d'un input dans un <td>

par

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

[onclebob]

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

Code :

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

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

[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+

[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.

[fadex]

merci

j'ai trouvé aussi ca :

Code :

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

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);

et pour supprimer comment je peux faire ?

[E.Bzz]

et pour supprimer comment je peus faire ?

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 ?

[fadex]

onclebob à dit :

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

[E.Bzz]

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

[E.Bzz]

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

A+

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