Build Dynamic Table With Innerhtml

I'm trying to build a dynamic table in javascript with innerHTML. When the web app runs, it only prints the console.log, but doesn't build a table. I tried two ways: First: s

Solution 1:

At first, loops can make things easier (and string literals too), so may simply display all object values:

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

Or if you dont like the literals, same works with concatenation too:

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

And you.may want to do sth with html :

document.body.innerHTML += html;

A small demo

Solution 2:

You need to use an existing element's .innerHTML method to write the html produced by your function to the document. Here's a very simple example with no real data.

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);

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

Solution 3:

First you need to append the dati.variables to the string and not have them as part of the string itself like:

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"

Then you need to append the html you created to the page, depending on where you want to add the table. This will append it to the body:

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

or set the body to your html:

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