1
votes

JS et DOM, essayant de créer une table

J'ai essayé de créer une table mais je ne peux pas créer td dans chaque tr, td crée uniquement dans le premier td ce qui est dans la table, comment puis-je résoudre le problème? pre> XXX

// Création d'icônes

function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")

for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr)
    tr.setAttribute("id", "tr")
    var td = document.createElement("td")
    td.innerHTML = ""
    document.getElementById("tr").appendChild(td)
}
}

// Création de tr et td

var puzzleico = document.createElement("div")
puzzleico.innerHTML = ""
document.getElementById("main").appendChild(puzzleico)
puzzleico.setAttribute("id", "puzzleico")
var puzzleico = document.getElementById("puzzleico").onclick = function() {createtable()};

p >

javascript dom dom-events

0 commentaires

4 Réponses :

2
votes

Élément id dans un document doit être unique . Le problème ici est que votre document.getElementById ("tr") retournera toujours le premier élément qu'il trouve avec cet id et donc, tous vos les éléments seront ajoutés au premier .

Pour le corriger, vous pouvez supprimer le tr.setAttribute ("id", "tr") et utilisez la variable tr déjà existante pour ajouter l'enfant td à.

  
 

function createtable() {
  //Creating Table
  var table = document.createElement("table");
  document.body.appendChild(table);

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr");
    table.appendChild(tr);

    var td = document.createElement("td");
    td.innerHTML = "test";
    tr.appendChild(td);
  }
}


  Le code ci-dessus fonctionnera, mais l'utilisation des variables déjà déclarées au lieu de les retrouver peut également être appliquée au cas  table . De plus,  table.innerHTML = ""  n'ajoute aucune valeur car le  innerHTML  est déjà vide lorsque vous créez un nouvel élément. 
 function createtable() {
  //Creating Table
  var table = document.createElement("table")
  table.innerHTML = ""
  document.body.appendChild(table)
  table.setAttribute("id", "table")

  for (var i = 0; i < 50; i++) {
    var tr = document.createElement("tr")
    tr.innerHTML = ""
    document.getElementById("table").appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = "test"
    tr.appendChild(td)
  }
}
createtable();

2 commentaires

Peut-être aussi utiliser la variable table au lieu de document.getElementById ("table") ; Pas nécessaire mais la fonction sera interrompue si vous voulez créer plusieurs tables.

@theblackgigant Oui, définitivement. Mise à jour de la réponse.

0
votes

Vous pouvez utiliser ceci pour créer la table:

function createTable(){
  //Creating And Appending Child
  let table = document.createElement('table');
  document.body.appendChild(table);

  for(let i = 0; i < 50; i++){
    let tr = document.createElement('tr');
    let td = document.createElement('td');
    td.innerHTML = i;
    tr.appendChild(td);
    table.appendChild(tr);
  }
}

Voici le lien vers mon codepen: https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010

0 commentaires

0
votes

L'attribut id de chaque élément du DOM doit être unique. Vous définissez le même identifiant pour chaque élément tr que vous créez. document.getElementById element renvoie toujours le premier élément correspondant par l'id. C'est la raison du problème. Votre dernier extrait de code doit être:

function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr" + i) // Check this
        var td = document.createElement("td")
        td.innerHTML = ""
        document.getElementById("tr" + i).appendChild(td) // Check this
    }
}

tr.appendChild (td) devrait également fonctionner si vous n'avez pas besoin d'attribut ID.

0 commentaires

0
votes

J'ai modifié votre réponse et j'ai obtenu ce que je voulais.

    //Creating tr and td
function createtable() {
    //Creating Table
    var table = document.createElement("table")
    table.innerHTML = ""
    document.body.appendChild(table)
    table.setAttribute("id", "table")

    for (var i = 0; i < 50; i++) {
        var tr = document.createElement("tr")
        tr.innerHTML = ""
        document.getElementById("table").appendChild(tr)
        tr.setAttribute("id", "tr")
        for (var v = 0; v < 50; v++) {
            var td = document.createElement("td")
            td.innerHTML = ""
            tr.appendChild(td)  
        }
    }
}

0 commentaires