[POO] Cloner une zone modele
Bonjour j'ai trouver sur le net un script qui explique comment cloner une zone modèle html en javascript et y modifier ces attribus, en suivant le même principe j'ai rajouter un éléments permettant de récupérer la valeur du compteur en cours pour travailler le contenu de la zone modèle dupliquée, voila ce que ça donne:
HTML
Code:
1
2
3
4
5
6
7
8
9
|
<select id="select_modele" name="modele" style="display:none;">
<option value="blabla1">TEXTE1</option>
<option value="blabla2">TEXTE2</option>
<option value="blabla3">TEXTE3</option>
</select>
<input type="hidden" name="input" id="input_modele" value="-2" />
<div id="Cible"> </div>
<button onclick="javascript:addSelect('contrat');" type="button">Ajouter un contrat</button> |
JS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
var i=0;
function addSelect(typ_select)
{
i++;
// On récupère l'endroit où devra être ajouté la liste
var Cible = document.getElementById("Cible");
// On récupère la liste modèle
var liste = document.getElementById("select_modele");
// On la clone dans une nouvelle variable
var nvxListe = liste.cloneNode(true);
// On récupère l'input modèle
var input = document.getElementById("input_modele");
// On la clone dans une nouvelle variable
var nvxInput = input.cloneNode(true);
// creation d'un saut de ligne
var br = document.createElement("br");
// On adapte les attributs de la nouvelle liste
nvxListe.name = typ_select + i;
nvxListe.style.display = "inline";
// On cree l'input qui contiendra a chaque fois la valeur du i ce qui nous permettra de pouvoir faire les enregistrement
nvxInput.name = typ_select;
nvxInput.id = typ_select;
nvxInput.value = i;
nvxInput.type = "hidden";
// On ajoute tout ça à l'emplacement voulu
Cible.appendChild(nvxListe);
Cible.appendChild(nvxInput);
Cible.appendChild(br);
} |
J'ai voulu tester si il y avait moyen de cloner une zone plus complexe tel qu'un div, et cela fonctionne via la même manière...
HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!-- ____________DEBUT DE LA ZONE MODELE (NON VISIBLE)______________ -->
<div id="modele" style="display:none;">
<table>
<tr>
<td>TITRE</td>
<td>
<select id="select_modele" name="modele" style="display:none;">
<option value="blabla1">TEXTE1</option>
<option value="blabla2">TEXTE2</option>
<option value="blabla3">TEXTE3</option>
</select>
</td>
</tr>
<tr>
<td><label for="dain">Date d entrée : </label></td>
<td><input type="text" name="dain" id="dain" value="X" tabindex="40" /><br /></td>
</tr>
<tr>
<td><label for="danom">Date de nomination : </label></td>
<td><input type="text" name="danom" id="danom" value="X" tabindex="40" /><br /></td>
</tr>
</table>
</div>
<input type="hidden" name="input" id="input_modele" value="-2" />
<!-- ______________FIN DE LA CREATION DE LA ZONE MODELE_____________ -->
<div id="Cible"> </div>
<button onclick="javascript:addSelect('contrat');" type="button">Ajouter un contrat</button> |
JS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
var i=0;
function addSelect(typ_select)
{
i++;
// On récupère l'endroit où devra être ajouté la liste
var Cible = document.getElementById("Cible");
// On récupère la liste modèle
var div = document.getElementById("modele");
// On la clone dans une nouvelle variable
var nvxDiv = div.cloneNode(true);
// On récupère l'input modèle
var input = document.getElementById("input_modele");
// On la clone dans une nouvelle variable
var nvxInput = input.cloneNode(true);
// creation des attribus td du tableau de la page principale
var br = document.createElement("br");
// On adapte les attributs de la nouvelle liste
nvxDiv.name = typ_select + i;
nvxDiv.style.display = "inline";
// On cree l'input qui contiendra a chaque fois la valeur du i ce qui nous permettra de pouvoir faire les enregistrement
nvxInput.name = typ_select;
nvxInput.id = typ_select;
nvxInput.value = i;
nvxInput.type = "hidden";
// On ajoute tout ça à l'emplacement voulu
Cible.appendChild(nvxDiv);
Cible.appendChild(nvxInput);
Cible.appendChild(br);
} |
Cela fonctionne, je copie l'entièreté de mon div, mais il me vient une question:
Y a t'il moyen d'aller chercher les attributs des éléments contenu dans le div et de les modifier de la même manière que pour le div lui même?
Je répondrais oui a première vue, car je clone un div ayant du contenu, et donc pour moi ce contenu peut être modifié(fin selon MA logique lol).
Si c'est bien oui, la question que je me poserai alors c'est comment ?
Si c'est non, je suppose donc que je dois créer tout des éléments modèle afin de les modifier 1 par 1 dans le script?
PS: Si vous voyez des aberrations dans le code, soyez indulgent et dite le moi car je débute en javascript et je ne connais absolument pas ces possibilités.
Merci d'avance
