J'essaie d'afficher les données lues à partir d'un fichier dans un site Web. Je veux qu'il soit formaté dans un tableau. Voici le code pour configurer les en-têtes de table:

let table = document.getElementById("outputTable");
table.innerHTML = `<thead><tr>`;
for(const attribute in student_sample){
     table.innerHTML += `<th>${attribute}</th>`;
}
table.innerHTML += `</thead></tr>`

Cependant, au lieu de créer une ligne de tableau avec des en-têtes, il crée plusieurs lignes avec un en-tête dans chaque ligne. Il empile les en-têtes les uns après les autres au lieu de les aligner sur une seule rangée. Est-il possible de surmonter cette erreur? Le code fonctionne mais c'est juste sa mise en forme qui n'est pas bonne.

0
Guillermo Herrera 15 avril 2018 à 23:10

3 réponses

Meilleure réponse

Vous ne pouvez pas ajouter uniquement des balises d'ouverture au DOM table.innerHTML = '<thead><tr>'; - si le navigateur a fait que le innerHTML créerait un DOM invalide, même si vos prochaines lignes de code l'adressent.

À la place, créez un string et appliquez-le à table.innerHTML une fois terminé:

let table = document.getElementById("outputTable");
let tr = '<thead><tr>';
for(const attribute in student_sample){
     tr += `<th>${attribute}</th>`;
}
tr += '</tr></thead>'
table.innerHTML = tr

Marchera.

L'autre problème rencontré par votre code est que vous avez fermé thead et tr dans le mauvais ordre.

1
connexo 15 avril 2018 à 20:20

Vous avez plutôt besoin de createElement qui crée node dans la table qui est le thead puis vous appendChild qui crée un élément à l'intérieur du head puis pour chaque attr dans la boucle crée un élément et l'ajoute au tr

Donc, par là, vous n'avez pas besoin d'ajouter du texte innerHTML et cela crée des nœuds et les ajoute. Cela aide plus si votre code est devenu plus complexe à déboguer.

let table = document.getElementById("outputTable");
let head  = document.createElement("thead");
let row =  head.appendChild("tr");
for(const attribute in student_sample){
let th = document.createElement("th");
    th.appendChild(${attribute});
    row.appendChild(th);
}
0
mooga 15 avril 2018 à 20:50

Il est plus sûr et plus élégant de créer des éléments directement et d'affecter du texte plutôt que d'insérer du texte dans une chaîne qui sera analysée en HTML plus tard. Je n'utiliserais innerHTML que lorsque l'on vous donne une chaîne HTML à insérer, mais je pense que vous ne devriez pas essayer d'en créer une lorsque ce n'est pas nécessaire.

Essayez plutôt quelque chose comme ceci:

// theads are created automatically:
const thead = document.querySelector('#outputTable > thead');
Object.keys(student_sample).forEach(attribute => {
  thead.appendChild(document.createElement('tr'))
    .textContent = attribute;
})
0
CertainPerformance 15 avril 2018 à 20:18