AppendChild and html table
Résolu
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
-
Modérateur
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é
-
Modérateur@firpic
Sans voir le code modifié ... impossible de te répondre
-
@jordane45
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>
-
