Création de tableau en DOM2

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:

---

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:

Citation:

---

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

---

jour

tu créé un seule td essai en deplacant

Citation:

---

td=document.createElement('td')

---

, dans la boucle de cette facon

Code:

---

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

---

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?

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

OK merci