Comment créer un tableau HTML dynamique avec Javascript?

Programmation JavaScript
, , , , ,
1

Quelqu’un peut-il me dire ce qui cloche avec ce code ? Je veux créer un tableau avec 3 colonnes et 3 lignes, et dans les cellules je veux du Texte1 et Texte2 sur chaque ligne. Ce code crée un tableau avec 3 colonnes et 3 lignes, mais il n’y a que du texte dans les cellules de la troisième ligne (les autres sont vides).

var mydiv = document.getElementById('myDiv');

var table = document.createElement('table');

var tr = [];

var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');

var texte1 = document.createTextNode('Texte1');
var texte2 = document.createTextNode('Texte2');
var texte3 = document.createTextNode('Texte3');

for (var i = 1; i < 4; i++){
    tr[i] = document.createElement('tr');   
    for (var j = 1; j < 4; j++){
        td1.appendChild(texte1);
        td2.appendChild(texte2);
        td3.appendChild(texte3);
        tr[i].appendChild(td1);
        tr[i].appendChild(td2);
        tr[i].appendChild(td3);
    }           
    table.appendChild(tr[i]);
}

mydiv.appendChild(table);
2

Vous devez créer les noeuds td et text dans la boucle. Votre code ne crée que 3 td, donc seulement 3 sont visibles. Exemple :

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');

    var texte1 = document.createTextNode('Texte1');
    var texte2 = document.createTextNode('Texte2');
    var texte3 = document.createTextNode('Texte3');

    td1.appendChild(texte1);
    td2.appendChild(texte2);
    td3.appendChild(texte3);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    table.appendChild(tr);
}
document.body.appendChild(table);

Voir le résultat ci-dessous:

3

Tu peux voir ce tutoriel, ça peut vous aider: