drop down list dans table HTML

Version imprimable

bonjour.
J'essaie avec javascript d'ajouter des lignes dans une table:
la ligne comprend une zone de texte,3 dropdown (sel_1G ou sel_2G,sel_saln et sel_ens) et un textaera:

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
39
40
41
42
43
 
		for(var i1=0;i1<tabgr[tpobjid].length;i1++){
			rc=t1.rows.length;	
			row=t1.insertRow(rc);
 
			cell1=row.insertCell(0);
			cell1.appendChild(document.createTextNode(tabgr[tpobjid][i1]));
		//	row.insertCell(0).innerHTML=tabgr[tpobjid][i1];
		//	matières:dépend du groupe
			cell2=row.insertCell(1);
			switch(tabgr[tpobjid][i1].trim()){
			case '1':
			case '2':
			case '3':
			case '4':
			case '5':
			case '6':
			case '7':
			case '8':
				cell2.appendChild(sel_1g);
				break;
			default:
				cell2.appendChild(sel_2g);
				break;
			}
		//	td=document.createElement('td');
		//	td.appendChild(sel_1G);
		//	row.insertCell(1).appendChild(td);
		// salles:fabriquer un select et insérer
			cell3=row.insertCell(2);
			cell3.appendChild(sel_saln);
		//	row.insertCell(2).innerHTML='';
		// enseignants:fabriquer un select et insérer	
			cell4=row.insertCell(3);
			cell4.appendChild(sel_ens);
		//	row.insertCell(3).innerHTML='';
		//comment
			cell5=row.insertCell(4);
			var comm=document.createElement('textarea');
		//	comm.type='text';
			comm.value='';comm.style.width="100px";
			cell5.appendChild(comm);
		}

Pour le textnode et le textarea pas de problème, par contre je ne retrouve les 3 listes que sur la dernière ligne...
D'avance merci

02/09/2015, 14h55
SylvainPV

document.createTextNode et document.createElement, comme leurs noms l'indiquent, créent des éléments. Tandis que pour tes select, tu ne fais que déplacer la même référence au même élément. Il faut recréer l'élément select à chaque ligne.
02/09/2015, 20h14
NoSmoking

Bonjour,
cette discussion peut intéresser Insertion/Suppression d'une ligne d'une TABLE.

insert row dans table avec une dropdown list

Bonjour,
Je cherche à manipuler une dropdown list (=sel_1g) inclus dans une cellule de table:

Code:

1
2
3
4
5
6
7
8
9
10
 
 var sel_1g=document.createElement("select");
		for(var i2=0;i2<divNode.length;i2++)
			{
			//fabrication du select
				{opt1G=document.createElement('option');
				opt1G.setAttribute("value",divNode[i2].title);
				opt1G.text=divNode[i2].innerHTML;
				sel_1g.appendChild(opt1G);nb_opt1g++;}
}

Puis insert dans table:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
var t1=document.getElementById("t_draggable2");//la table
			rc=t1.rows.length;	
			row=t1.insertRow(rc);
 
			cell1=row.insertCell(0);
			cell1.appendChild(document.createTextNode(tabgr[tpobjid][i1]));
	                cell2=row.insertCell(1);
				var sel_1gt=sel_1g.cloneNode(true);
				sel_1gt.setAttribute("id","idM_"+i1);
 
				cell2.appendChild(sel_1gt);
 
				id_1g=document.getElementById("idM_"+i1);//pouvoir recuperer id
 
			       nb_opt1g=id_1g.options.length;
				for(var i2=0;i2<nb_opt1g;i2++)
					{
					if(id_1g.options[i2].value == tabmattp[tpobjid][i1])
					{id_1g.options[i2].selected=true;break;}
					}

En fait impossible de récupérer id_1g puis de tester les valeurs contenues dans la select...
D'avance merci.

Bonjour,

En premier lieu pense bien à donner du code exécutable avec l'ensemble des valeurs définis.
Dans ton cas, on ne peut pas tester ton JavaScript car il manque la définition de la valeur divNode. Ce qui fait qu'il est beaucoup plus compliqué de t'aider. Car, il ne nous est pas possible d'arriver là où tu bloque.

En second lieu, ton code JavaScript semble faire beaucoup de chose qui me semble étrange et les variable ne sont pas très parlante.
Pour la création d'une nouvelle ligne
Code:

1 2 3 rc=t1.rows.length; row=t1.insertRow(t1.rows.length);
Peut-être remplacé par (du moins pour Firefox Chrome et IE):
Code:

1 2 row=t1.insertRow();
Globalement, j'ai repris morceau par morceau ton code est j'ai ceci qui fonctionne :

Cela donne le code suivant :
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid black; } </style> </head> <body> <table id="myTable"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var sel_1g=document.createElement("select"); // on affiche en console l'element généré : console.log(sel_1gt); var table = document.getElementById("myTable"); var row = table.insertRow(); var cell1 = row.insertCell(); cell1.innerHTML = "Nouvelle cellule"; var sel_1gt=sel_1g.cloneNode(true); // On affiche en console l'element généré : console.log(sel_1gt); document.body.appendChild(document.createElement("select")); sel_1gt.setAttribute("id","idM_"+1); // On ajout l'élément au DOM cell1.appendChild(sel_1gt); var id_1g=document.getElementById("idM_"+1); // On affiche en console l'element récupéré: console.log(id_1g); } </script> </body> </html>
Pense à bien faire des traces en console à chaque étape où tu n'es pas sûr de ce qu'il se passe.

Cordialement,
Patrick Kolodziejczyk.