Discussion :

[E.Bzz]

normal que dans le code source de ma page je n'ai que ma première liste qui s'affiche même s'il y en a plusieurs ?

Oui : le code source représente le code initial de la page, sans les modif effecuées dynamiquement via JS

j'ai un problème de colspan (cf image, il faudrait que toutes mes listes soient alignées)

Visiblement le clonage a foiré

Faudrait voir (tout en généré, hein : pas le code PHP) :

• Le code HTML initial
• Le code JS de clonage
• LE code HTML résultant

A+

[baggie]

Alors, c'est parti !

Code HTML initial :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<tr id="Assureur">
  <td>Assureur</td><td>
	<select id="46">
                  <option value="0-0">Sélectionnez une société</option>
                  <option value="13-ste1">ste1</option>
                  <option value="14-ste2">ste2</option>
        </select></td>
  <td><input type="button" name="add" value="+" onclick="add_soc('46','Assureur');"/>
</td></tr>
<tr><td><div id="div46" style="display:none;"></div></td></tr>

Code JS de clonage :

Code :

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

1
2
3
4
5
6
7
8
 
function add_soc(id,nom)
{
	document.getElementById("div"+id).style.display = 'block';
	var leTrACopier = document.getElementById(nom);
	var laDivOuAjouterLaListe = document.getElementById("div"+id);
	laDivOuAjouterLaListe.appendChild(leTrACopier.cloneNode(true));
}

Code HTML résultant (pour la liste de base + 2 listes clonées) :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<tr id="Assureur">
         <td>Assureur</td>
         <td>
            <select id="46">
                <option value="0-0">Sélectionnez une société</option>
                <option value="13-ste1">ste1</option>
                <option value="14-ste2">ste2</option>
            </select>
         </td>
         <td>
             <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
         </td>
  </tr>
  <tr>
       <td>
             <div id="div46" style="display: block;">
             <tr id="Assureur">
                 <td>Assureur</td>
                 <td>
                     <select id="46">
                            <option value="0-0">Sélectionnez une société</option>
                            <option value="13-ste1">ste1</option>
                            <option value="14-ste2">ste2</option>
                     </select>
                 </td>
                  <td>
                      <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
                 </td>
              </tr>
               <tr id="Assureur">
                 <td>Assureur</td>
                 <td>
                     <select id="46">
                            <option value="0-0">Sélectionnez une société</option>
                            <option value="13-ste1">ste1</option>
                            <option value="14-ste2">ste2</option>
                     </select>
                 </td>
                  <td>
                      <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
                 </td>
              </tr>
</div>
</td>
</tr>

[kernelfailure]

Mais tu es conscient que tu multiplies des ids qui devraient être unique ?

[kernelfailure]

Ton TR 'assureur' a par ailleurs 3 TDs
Le TR suivant n'en a qu'un seul

[baggie]

Mais tu es conscient que tu multiplies des ids qui devraient être unique ?

ConscientE, et oui je m'en suis rendue compte, faut que je fasse une espèce d'incrémentation, c'est prévu ^^

Pour l'histoire des tr et des td je verrai ça lundi, là weekend !
Merci de te pencher sur mon problème

[baggie]

Bon j'ai regardé le problème de mes tr et td.

Voici mon code de base (quand je n'ai pas appuyé sur +) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<tr id="Assureur">
       <td>Assureur</td>
       <td>
             <select id="46"><option ........>
             </select>
             <input type="button" onclick="add_soc('46','Assureur');" value="+" name="add"/>
       </td>
</tr>
<tr>
       <td>
              <div id="div46" style="display: none;"/>
       </td>
</tr>

Est-ce que mon problème ne viendrait pas du fait que mon div est entre un <td></td> ? et que du coup mon <tr> se calle à l'intérieur et ne correspond qu'à une cellule de mes autres <tr><td> ? (et donc que je n'ai qu'un td au lieu des deux de base)

Si ca vient de là, comment contourner le problème ?

[E.Bzz]

Est-ce que mon problème ne viendrait pas du fait que mon div est entre un <td></td> ?

Non, plutôt de l'absence du </div>

A+

[baggie]

Sauf que dans ma page, j'ai écrit ce code :

Code :

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

1
2
 
<tr><td><div id="div'.$idcat.'" style="display:none;"></div></td></tr>

Et dans fireBug, je n'ai que :

Code :

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

1
2
3
4
5
6
 
<tr>
       <td>
              <div id="div46" style="display: none;"/>
       </td>
</tr>

Je comprends paaaaaaaas.

PS : je suppose que modifier un id est une chose infaisable pour avoir des id de select différents ? (ceux que l'on copie doivent avoir un id différent du select source pour ensuite tout récupérer dans une requête vers une bdd)

[kernelfailure]

Effectivement, c'est pas normal que ton </DIV> ait disparu. A creuser.

Pour tes TR :
TR1 TD1 TD2
TR2 TD3

Pour que ton tableau n'est pas l'air bancal, sur ton TR2, soit tu ajoutes un TD, soit tu attributs un colspan=2 à ton unique TD (TD3).

Si je ne me trompe pas, ton DIV te sert simplement d'id pour ton insertion.
Dans ce cas, un simple :

Code :

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

leTrACopier.parentNode.appendChild(leTrACopier.cloneNode(true));

pourrait te suffire.
Ou encore :

Code :

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

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);

[baggie]

Ou encore :

Code :

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

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);

Nickel !

Par contre quand on a ce code là, est-il possible de modifier l'id de l'élément que l'on va ajouter ? (pour pouvoir enregistrer dans la base ensuite tous les choix des select)

[E.Bzz]

(pour pouvoir enregistrer dans la base ensuite tous les choix des select)

Même si l'ID doit effectivement être rendu unique, c'est le name qui est utilisé pour l'envoi au serveur via le formulaire

A+

[kernelfailure]

Et donc, il te suffit de récupérer ton clone dans une variable (que tu utiliseras pour l'insert ensuite). Par le biais de cette variable, tu peux ajuster tout ce que tu veux (id, name, style, etc...).

Donc, bien sur que tu peux changer l'ID.

[baggie]

Ah oui en effet !

Par contre y'a quelque chose que je ne vois pas comment faire : si je veux récupérer mon clone dans une variable, j'aurai bien fait getElementById('monclone'), mais comme mon élément copié et mon élément source ont le même id, comment je peux récupérer juste le clone ?

A la base j'ai ceci :

Code :

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

var leTrACopier = document.getElementById(nom);

Et le clonage :

Code :

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

leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);

Et du coup je vois pas comment faire la différence ... =/

EDIT : si je souhaite récupérer ce qui est choisi dans mon <select>, il ne faut pas plutôt que je copie chacun de mes éléments (le <td> avec le nom de la catégorie, le select avec la liste des sociétés), pour pouvoir ensuite récupérer via $_POST ce qu'il y a dans mon select ?

A moins qu'en copiant mon tr je suis capable de récupérer les différents éléments contenus dedans ?

Ca ne me dit toujours pas comment récupérer l'id de l'élément venant d'être copié (la copie, pas la source) x)

EDIT 2 : je viens de voir qu'en copiant mon <tr> je pourrai probablement avoir accès aux autres éléments dedans par firstchild et lastChild. Pour firstChild du <tr>, ça me donnerait mon <td> avec le nom de ma catégorie -> OK. Pour le lastChild, j'obtiendrai mon <select> ou le dernier <option> de celui-ci ?

[kernelfailure]

Bah, tout simplement :

Code :

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

1
2
3
4
5
6
var monClone = leTrACopier.cloneNode(true);
monClone.id = 'unNouvelID';
OU
monClone.setAttribute("id", 'unNouvelID');
...
leTrACopier.parentNode.insertBefore(monClone,leTrACopier.nextSibling);

Mais, suivant l'ordre d'insertion que tu souhaites, tu peux aussi changer l'id de leTrACopier juste après insertBefore.
Comme les insertions, sous cette forme, se font après le TR d'origine. A toi de voir si tu insère toujours en position 2 où après le dernier ajouté

[baggie]

Bah, tout simplement :

...

Oula, oui en effet x) L'art de se compliquer la vie made by moi.
Bref. Merci pour ceci !

Et un autre problème (décidément) :
- j'ai mon <tr> avec son id.
- je veux récupérer le <select> se trouvant dans ce <tr>
- arborescence : <tr id><td>nomcategorie<td>'vide'<select name = ...>

- en faisant des nextSibling, est-ce que je peux mettre un name à mon <select> pour le récupérer en POST après ?

- j'ai testé ce genre de chose :

Code :

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

1
2
3
4
5
 
var leTdNeutre = leTrACopier.firstChild;
var leTdCopie = leTdNeutre.nextSibling;
var leSelect = leTdCopie.nextSibling;
leSelect.setAttribute('name','nomduselect');

mais euh bon ... marche pas vraiment
De plus, comme je copie le <tr> avant, en entier, est-ce qu'il est possible, une fois copié de modifier les attributs de ses éléments ?

[E.Bzz]

Les nextSibling risque de réagir différemment suivant les navigateurs (cf. FAQ sur la gestion des noeuds vides).

Mieux vaudrait pointer sur ton select via

Code :

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

document.getElementById('id_du_tr').getElementsByTagName("select")[0]

EDIT : de plus, IE n'aime pas (enfin ... ne sais pas faire correctement ) modifier les name dynamiquement. Une recherche sur le forum pour trouver les méthodes de contournements ...

A+

[baggie]

Merci E.Bzz

J'ai fait ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function add_soc(id,nom)
{
	document.getElementById("div"+id).style.display = 'block';
	var leTrACopier = document.getElementById('tr'+nom);
	var laDivOuAjouterLaListe = document.getElementById("div"+id);
	var leSelect = document.getElementById(id);
	leSelect.setAttribute('name','select'+nom);
leTrACopier.parentNode.insertBefore(leTrACopier.cloneNode(true),leTrACopier.nextSibling);
}

et ça fonctionne comme je le souhaite !

Maintenant si tu dis que IE fait un peu nawak avec le setAttribute (enfin à ce que j'ai compris de ton post), bah je vais chercher autre chose alors ...

[E.Bzz]

Maintenant si tu dis que IE fait un peu nawak avec le setAttribute (enfin à ce que j'ai compris de ton post), bah je vais chercher autre chose alors ...

Essaye la solution en majuscule ...
Le name ne sera pas reconnu dans la page, mais devrait bien transmis au serveur

A+

[kernelfailure]

Les nextSibling risque de réagir différemment suivant les navigateurs (cf. FAQ sur la gestion des noeuds vides).

La seule différence que j'ai constaté sur les nodes, vient de l'ordre des datas/tags (Principalement sous Safari).
Dans ce cas, il faut tester le type du node.

Bien sur, cela n'est valable que si l'element peut contenir des DATAS (cf. DTD).

En l'occurrence, pas de DATA sur les TR.
Celà dit, je pencherais aussi pour le ByTagName

Pour les NAME via dom :

Code :

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

1
2
3
 
(...).setAttributeNode(document.createAttribute('Name')); // 'N'
(...).setAttribute('name', strName);