Dupliquer un élément HTML (liste déroulante avec le même chargement de données SQL) en Javascript

Bonjour

J'ai un tableau html avec dansw chaque ligne une liste déroulante.
Maintenant a l'aide d'un bouton je décide d'ajouter des lignes qui comporteront la mémé liste déroulante.
voici le code

Code:

---

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

<table align="center" id="idtabaert"> <caption>Les articles</caption> <tr> <td><select name="facture_article" id="facture_article"> <?php         $reponse = $bdd_facture->query('SELECT Designation FROM articles');          while ($donnees = $reponse->fetch()) {         echo '<option value="'.$donnees['Designation'].'">'.$donnees['Designation'].'</option>';                                                               }   $reponse->closeCursor();                                                            ?>   </select> </td> </tr> </table>

---

Maintenant voila la fonction Javascript qui ajoute des lignes déclenché par un evenement click sur un bouton

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function ajouterLigne() { var tableau = document.getElementById("idtabaert"); var ligne = tableau.insertRow(-1); var colonne1 = ligne.insertCell(0); colonne1.innerHTML = ' ' ; // Je veux mettre ici la même liste déroulante (<select name="facture_article" id="facture_article">) c'est a dire le contenu html et son chargement qu'il y a en haut }

---

Comment réaliser cela ?

Cordialement

tu peux essayer :

Code:

---

colonne1.innerHTML = document.getElementById("facture_article").parentNode.innerHTML;

---

Mais tu auras un problème avec des listes ayant le même name et id.

Il faut donc mieux passer par le clonage

Code:

---

1 2 3 4

var newList = document.getElementById("facture_article").cloneNode(true); newList.id = newList.id + tableau.rows.length; newList.name = newList.name + tableau.rows.length; colonne1.appendChild(newList);

---

Sachant que si tu peux supprimer des lignes, il faudra trouver une autre façon de différentier l'id ou le name de tes listes.

Merci beacoup ca marche
pour l'instant j'ai pas besoin de supprimer mais je comprens pas pourquoi jaurais besoin de differencier les id et name

Le names doivent être différentiés pour pouvoir les récupérer de façon unique.
Les ids sont par convention unique dans une page (contrairement aux classes).
Ensuite pour les lignes si tu en supprimes un et que tu en rajoutes une autres, tu risque d'avoir deux fois le même id et name à cause de : tableau.rows.length
Donc si un jour tu permets de supprimer des lignes, faudra mettre un compteur différent.
Bon courage,

Bonjour,

Maintenant je dois récupérer les donnes et les envoyer par la méthode Ajax.

Pour cela je décidé de mettre les champs de liste déroulantes dans un tableau.
Et comme on avait fait un clone de champs de liste déroulante qui sont différencies par leur Id en jouant sur le nombre de lignes du tab leau,

par

//idtabaert est L'ID d'un element HTML table
// Dans chaque ligne et dans chaque cellulle du tableau, on a une liste déroulante d'ID facture_article

Code:

---

1 2 3 4 5 6 7

var tableau = document.getElementById("idtabaert"); var ligne = tableau.insertRow(-1); var colonne1 = ligne.insertCell(0); var newList = document.getElementById("facture_article").cloneNode(true); newList.id = newList.id + tableau.rows.length; newList.name = newList.name + tableau.rows.length; colonne1.appendChild(newList);

---

mon problème est comment les ranger dans un tableau
j'ai essaye ceci

Code:

---

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

test=new Array(); test[0]=document.getElementById("facture_article").value; var arrayLignes = document.getElementById("idtabaert").rows; //l'array est stocké dans une variable   var longueur = arrayLignes.length;//on peut donc appliquer la propriété length   var i=1; //on définit un incrementeur qui représentera la clé var j=1;   while(i<longueur)   {     test[i] = document.getElementById("facture_article"+j).value; i++; j++;   }

---

mais ça marche pas.

Vous avez une idée ?

Bonjour,

Le plus simple à mon avis est :

Code:

---

1 2 3 4 5

var newList = document.getElementById("facture_article").cloneNode(true); newList.id = newList.id + tableau.rows.length; newList.name = newList.name + tableau.rows.length; newList.class = "myLists"; colonne1.appendChild(newList);

---

Puis :

Code:

---

1 2 3 4 5

var myLists = document.getElementsByClassName('myLists'); var myListsValues = new.Array(); for (i=0; i < myLists.length; i++) { myListsValues.push(myLists[i].options[myLists[i].selectedIndex].value); }

---

Pas testé donc bug d'écriture possible mais le principe est là

Je l'ai bien teste mais en faisant

Code:

---

alert(myListsValues[1]);

---

j'obtiens

undefined

Peut être qu'il y a un problème de syntaxe ?

erreur de frappe

Code:

---

var myListsValues = new Array();

---

N'hésite pas à utiliser la console de ton navigateur pour débuger.

ok pourtant je l'avais bien corrige mais ça ne change rien
toujours undefined.

Le script est pourtant bon. Tu peux tester cet exemple :

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

<!DOCTYPE html> <html> <head> </head> <body style="margin: 0; padding: 0"> <select class="myLists" name="facture_article" id="facture_article"> <option value="1">un</option> <option value="2">deux</option> <option value="3" selected>trois</option> <option value="4">quatre</option> </select> <select class="myLists" name="facture_article2" id="facture_article2"> <option value="1">un</option> <option value="2" selected>deux</option> <option value="3">trois</option> <option value="4">quatre</option> </select> <script>       var myLists = document.getElementsByClassName('myLists');       var myListsValues = new Array();       for (i=0; i < myLists.length; i++) {         myListsValues.push(myLists[i].options[myLists[i].selectedIndex].value);       }       alert(myListsValues[0]);     </script   </body> </html>

---

As tu bien rajouté la class 'myLists' à ton select ?
J'avais rajouté

Code:

---

newList.class = "myLists";

---

dans la copie de la liste initiale.
D'ailleurs en fait il faut mieux enlever cette ligne de la copie et le mettre dans ton select initial :

Code:

---

<td><select name="facture_article" id="facture_article" class="myLists">...

---

Quand tu as des problèmes de ce type il faut vraiment que tu utilises la console.
ex dans IE : F12 clic sur l'onglet console et rafraichie ta page.
Quel message as tu ?

Merci.

C'est réglé. il fallait mettre au niveau de l’élément la classe.


merci pour tout.