Discussion :

[serigne]

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 :

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

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

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

[www.diazis.com]

tu peux essayer :

Code :

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

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 :

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

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.

[serigne]

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

[www.diazis.com]

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,

[serigne]

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 :

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

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 :

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

[www.diazis.com]

Bonjour,

Le plus simple à mon avis est :

Code :

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

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 :

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

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à