construire une table dynamique avec innerHTML

Question

Je suis en train d'essayer de construire une table dynamique sur javascript avec innerHTML. mais quand la webapp s'exécute, elle imprime seulement le fichier console.log, mais ne construit pas de table.

J'ai essayé de deux façons:

la première:

success: function (data, status, jqXHR) { 


     $.each(data, function (index, dati) { 

      console.log(dati) 


      var html = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>dati.codiceCOmmessa </td>\n" + 
       "  <td>dati.commessaMainSub</td>\n" + 
       "  <td>dati.settoreCliente</td>\n" + 
       "  <td>dati.nomeCliente</td>\n" + 
       "  <td>dati.titoloQuals</td>\n" + 
       "  <td>dati.keyWordsTopic</td>\n" + 
       "  <td>dati.keyWordsActivities</td>\n" + 
       "  <td>dati.anno</td>\n" + 
       "  <td>dati.dataInizio</td>\n" + 
       "  <td>dati.dataFine</td>\n" + 
       "  <td>dati.referente</td>\n" + 
       "  <td>dati.referenteDoc</td>\n" + 
       "  <td>dati.sviluppatore</td>\n" + 
       "  <td>dati.path</td>\n" + 
       " </tr>\n" + 
       "</table>" 

      html.innerHTML; 
     }) 
    }, 

et le second (Whit body.innerHTML ou node.innerHTML, l'application fait une erreur):

success: function (data, status, jqXHR) { 


     $.each(data, function (index, dati) { 

      console.log(dati) 

      innerHTML = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>dati.codiceCOmmessa </td>\n" + 
       "  <td>dati.commessaMainSub</td>\n" + 
       "  <td>dati.settoreCliente</td>\n" + 
       "  <td>dati.nomeCliente</td>\n" + 
       "  <td>dati.titoloQuals</td>\n" + 
       "  <td>dati.keyWordsTopic</td>\n" + 
       "  <td>dati.keyWordsActivities</td>\n" + 
       "  <td>dati.anno</td>\n" + 
       "  <td>dati.dataInizio</td>\n" + 
       "  <td>dati.dataFine</td>\n" + 
       "  <td>dati.referente</td>\n" + 
       "  <td>dati.referenteDoc</td>\n" + 
       "  <td>dati.sviluppatore</td>\n" + 
       "  <td>dati.path</td>\n" + 
       " </tr>\n" + 
       "</table>" 


     }) 
    } 

quelqu'un peut m'aider? où je me trompe?

Answer 1

Dans un premier temps, les boucles peuvent rendre les choses plus faciles (et des chaînes littérales aussi), donc peut simplement afficher toutes les valeurs de l'objet:

var html = 
`<table width='450' bgcolor='white' border='2'bordercolor='black' cellpadding='10' cellspacing='1'> 
    <tr style='min-width:850px'> 
     ${ 
      Object.values(dati) 
      .map(
       value => `<td>${value}</td>` 
      ).join("\n") 
      } 
     </tr> 
    </table>`; 

Ou si vous ne aimez pas les littéraux , fonctionne également avec la concaténation:

var html =  
    "<table width='450' bgcolor='white' border='2'bordercolor='black' cellpadding='10' cellspacing='1'><tr style='min-width:850px'>" 
+ Object.values(dati) 
    .map(
     value => "<td>"+value+"</td>" 
    ).join("\n") 
+ "</tr></table>"; 

Et you.may voulez faire qqch avec html:

document.body.innerHTML += html; 

A small demo

Answer 2

Vous devez utiliser la méthode .innerHTML d'un élément existant pour écrire le code HTML généré par votre fonction dans le document. Voici un exemple très simple sans données réelles.

var success = function(data, status, jqXHR) { 
 

 

 
    $.each(data, function(index, dati) { 
 

 
    console.log(dati) 
 

 

 
    var html = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
 
     " <tr style=min-width:850px>\n" + 
 
     "  <td>dati.codiceCOmmessa </td>\n" + 
 
     "  <td>dati.commessaMainSub</td>\n" + 
 
     "  <td>dati.settoreCliente</td>\n" + 
 
     "  <td>dati.nomeCliente</td>\n" + 
 
     "  <td>dati.titoloQuals</td>\n" + 
 
     "  <td>dati.keyWordsTopic</td>\n" + 
 
     "  <td>dati.keyWordsActivities</td>\n" + 
 
     "  <td>dati.anno</td>\n" + 
 
     "  <td>dati.dataInizio</td>\n" + 
 
     "  <td>dati.dataFine</td>\n" + 
 
     "  <td>dati.referente</td>\n" + 
 
     "  <td>dati.referenteDoc</td>\n" + 
 
     "  <td>dati.sviluppatore</td>\n" + 
 
     "  <td>dati.path</td>\n" + 
 
     " </tr>\n" + 
 
     "</table>" 
 

 

 
    document.getElementById('wrapper').innerHTML = html; 
 
    }) 
 
}; 
 

 
success([0, 1], null, null);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"></div>

Answer 3

Vous devez d'abord ajouter les dati.variables à la chaîne et ne pas les avoir dans le cadre de la chaîne elle-même comme:

innerHTML = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>" + dati.codiceCOmmessa + "</td>\n" + 
       "  <td>" + dati.commessaMainSub + "</td>\n" 

Ensuite, vous devez ajouter le code HTML que vous avez créé à la page, en fonction de l'endroit où vous souhaitez ajouter la table. Cela ajoutera au corps:

$(innerHTML).appendTo($('body')); 

ou mettre le corps à votre html:

$('body').html(innerHTML);