AppendChild and html table
Résolu
firpic Messages postés 101 Statut Membre -
Bonjour,
Je vais vous expliquer le resultat attendu. Je voudrais ajouter des donne dans un tableau fournier par un fichier json.
Le probleme est que je n'arrive pas a ajouter <tr> avec appendChild.
voici le code js:
const powerTable = document.querySelector(
'.power > div.table > table > tbody > td '
);
var powerData = jsonSectionData.bmw.power;
for (let x = 0; x < powerData.length; x++) {
var tr = document.createElement('tr')
tr.innerText=powerData[x]
console.log(tr);
tr.appendChild(powerTable)
}
Et voici l'erreur :
index.js:108 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at bmwSection (index.js:13:8)
J'ai aussi une autre erreur, je creer un tableau avec des valeur dans des <tr> pour pouvoir le styliser mais quand j'ouvre la page toute les donne sont rassemble et forme une chaine de caractere dans le parent <table> .
Voici le code du fichier :
<div class="table">
<table>
<thead>
<td>
<tr>
Power
</tr>
</td>
</thead>
<tbody>
<td><tr>234</tr>
<tr>32</tr>
<tr>321</tr>
<tr>241</tr>
<tr>T79</tr></td>
</tbody>
</table>
</div>
Et voici le resultat une fois ouvert dans un navigateur:
<div class="table">
Power
23432321241T79<table>
<thead>
<tr><td>
</td></tr><tr></tr>
</thead>
<tbody>
<tr><td></td></tr><tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
Je ne comprend absolument pas d'ou peut provenir le probleme de la page html
1 réponse
-
Bonjour,
Déjà, petit souci de structure html :
Les TD ce sont les cellules
Les TR .. les LIGNES
Tu mets des TD dans des TR et non l'inverse !
-
Merci, c'etait vraiment une erreur bete.
Je log le >tr> dans la console, pr le dernier <tr>, il y a une erreur, il ajoute un <td> puis un <tr> mais met la donne dans le <td> au lieu du <tr>. Je ne voit pas d'ou cela peut provenir.
<td>2.3</td> <td>2</td> <td>2.2</td> <td>2.9</td> <td>3<tr></tr></td>
Je n'ai plus d'erreur pour appendChild mais ils ne s'ajoutent pas non plus au td selectioné
Oups, dsl
Voici le code JS modifier:
function table(section, table) { switch (table) { case 'power': data = jsonSectionData.bmw.power; l = data.length; for (let x = 0; x < l; x++) { var td = document.createElement('td'); td.innerText = data[x]; console.log(td); td.appendChild(powerTable); } data = undefined; l = undefined; td = undefined; break; case 'couple': data = jsonSectionData.bmw.couple; l = data.length; for (let x = 0; x < l; x++) { var td = document.createElement('td'); td.innerText = data[x]; console.log(td); td.appendChild(coupleTable); } data = undefined; l = undefined; td = undefined; break; } } const tableList = [ 'power', 'couple', 'model', 'engine', 'gear', 'cylinder', ]; for (let n = 0; n < tableList.length; n++) { table('bmw', tableList[n]); }Et le code HTML modifer :
<div class="power"> <div class="photo"> <img src="" alt="image-power-section" /> </div> <div class="table"> <table> <thead> <tr> <td> Power </td> </tr> </thead> <tbody> <tr> <td>487</td> <td>085780</td> <td>test</td> <td>test</td> <td>teset</td> </tr> </tbody> </table> </div> </div>
-
