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à

[serigne]

Je l'ai bien teste mais en faisant

Code :

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

 alert(myListsValues[1]);

j'obtiens

undefined

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

[www.diazis.com]

erreur de frappe

Code :

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

var myListsValues = new Array();

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

[serigne]

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

[www.diazis.com]

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

Code html :

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

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

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

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

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

[serigne]

Merci.

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


merci pour tout.