AppendChild and html table

Résolu

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

AppendChild and html table
Table ascii - Guide
Table des matières word - Guide
Editeur html - Télécharger - HTML
Spybot search and destroy - Télécharger - Antivirus & Antimalwares
Html br - Forum HTML

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 Statut Membre Dernière intervention 1

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention

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

firpic Messages postés 90 Date d'inscription Statut Membre Dernière intervention 1 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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..

Intégrer une table des annexes et des matières sur word

Page bleue : your PC ran into a problem and needs to restart

la balise ou

ou ou

Votre réponse

Discussions similaires