Discussion :

[laetisam]

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 :

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

[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.

[NoSmoking]

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

[laetisam]

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

Code :

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

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 :

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

[kolodz]

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

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

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

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

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