AppendChild and html table

Résolu/Fermé

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - Modifié le 16 nov. 2022 à 17:34
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 17 nov. 2022 à 20:04

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

A voir également:

AppendChild and html table
Table ascii - Guide
Table des matières word - Guide
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Table des annexes word ✓ - Forum Word

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
16 nov. 2022 à 18:00

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 !

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
Modifié le 17 nov. 2022 à 11:00

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é

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022
17 nov. 2022 à 11:33

Sans voir le code modifié ... impossible de te répondre

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
17 nov. 2022 à 20:04

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>

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

"Reboot and Select proper Boot Device"

Télécharger fast and furious 1,2,3,4,5

Espace en HTML

la balise <br> ou <br />

Discussions similaires

Newsletters