Discussion :

[moimp]

Bonjour et meilleurs vœux à tous.

Dans la fonction suivante, j'attends un tableau de lignes de même structure mais avec des données utilisateur différentes. Chaque ligne contient un champ de formulaire par cellule. Mon code place tous les champs de formulaire dans une seule cellule au lieu de les répartir dans quatre cellules.
Les lignes 15 et 16 me renvoient apparemment les bons éléments (voir ci-dessous) mais la structure du DOM n'est pas bonne.

Code javascript :

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
newAction.addEventListener('click', function() {
	var tr			= document.createElement('tr'),
		td			= document.createElement('td'),
		qui			= document.createElement('select'),
		action		= document.createElement('input'),
		commentaire	= document.createElement('textarea'),
		fait		= document.createElement('input'),
		tds			= [];
 
	tbody.appendChild(tr);
	for (let i=0; i<4; i++) {
		tds.push(td);
		tr.appendChild(tds[i]);
	}
	console.log('tr: '+tr);
	console.log('tds: '+tds);
	tds[0].appendChild(qui);
	tds[1].appendChild(action);
	tds[2].appendChild(commentaire);
	tds[3].appendChild(fait);
}, false );

Fenêtre de débogage dans IE11:

tr: [object HTMLTableRowElement]
tds: [object HTMLTableDataCellElement],[object HTMLTableDataCellElement],[object HTMLTableDataCellElement],[object HTMLTableDataCellElement]

[melka one]

jour

tu créé un seule td essai en deplacant

td=document.createElement('td')

, dans la boucle de cette facon

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
 
newAction.addEventListener('click', function() {
	var tr			= document.createElement('tr'),
		qui			= document.createElement('select'),
		action		= document.createElement('input'),
		commentaire	= document.createElement('textarea'),
		fait		= document.createElement('input'),
		tds			= [];
 
	//lines.push(new line(lines.length + 1, qui, action, commentaire, fait));
	tbody.appendChild(tr);
	for (let i=0; i<4; i++) {
                td= document.createElement('td'),
		tds.push(td);
		tr.appendChild(tds[i]);
	}
	console.log('tr: '+tr);
	console.log('tds: '+tds);
	tds[0].appendChild(qui);
	tds[1].appendChild(action);
	tds[2].appendChild(commentaire);
	tds[3].appendChild(fait);
}, false );

[moimp]

Merci, c'est effectivement la bonne solution. Autrement si j'ai bien compris après avoir approfondi la question, la variable td étant définie, il faudrait la cloner et non pas la réutiliser (ligne 12 de mon code en #1). Est-ce bien exact?

[melka one]

la solution pourrait être de cloner la ligne entière avec cloneNode mais je pense pas que ce soit utile.

[moimp]

OK merci