build dynamic table with innerHTML

Question

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:

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

Second:

(with body.innerHTML or node.innerHTML, the app makes a mistake) :

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


        })
    }

Can somebody help tell me what I'm doing wrong?

dati.keyWordsTopic are variables, try it like " <td>"+ dati.keyWordsTopic+"</td>\n" + — Satpal
– Satpal, Commented Aug 1, 2017 at 13:36
You need to write the string you have created somewhere, meaning that you need to call the .innerHTML of an element to actually write this on the page. — Angelos Chalaris
– Angelos Chalaris, Commented Aug 1, 2017 at 13:37
You've added "<td>dati.titoloQuals</td>" the element values are variables... You need: "<td>" + dati.titoloQuals + "</td>". — Tez Wingfield
– Tez Wingfield, Commented Aug 1, 2017 at 13:39
html is a string so what do you expect to happen in the line html.innerHTML; ? — Andreas
– Andreas, Commented Aug 1, 2017 at 13:39

Jonas Wilms · Accepted Answer · 2017-08-01 14:00:24Z

2

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

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

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

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

And you.may want to do sth with html :

document.body.innerHTML += html;

A small demo

edited Aug 1, 2017 at 14:00

answered Aug 1, 2017 at 13:44

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tez Wingfield Over a year ago

Always writing beautiful code, can never get away from you haha :P

Jonas Wilms Over a year ago

@tez is that sarcasm ? !/

Tez Wingfield Over a year ago

Haha yes... A huge compliment. I just know when your around I wont post an answer. (+1)

Jonas Wilms Over a year ago

@tez wingfield the same happens to me when t.j. crowder, bergi or pointy are around.... ;)

Angelos Chalaris · Accepted Answer · 2017-08-01 13:41:03Z

0

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

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

answered Aug 1, 2017 at 13:41

Angelos Chalaris

6,7978 gold badges55 silver badges82 bronze badges

2 Comments

Tez Wingfield Over a year ago

You may need to enlighten OP of the variables interpreted as strings?

Angelos Chalaris Over a year ago

@TezWingfield Maybe I do, but I think this is besides the scope of the question. Plus, there are plenty of other, far better answers elsewhere for that, so I would rather he did check them, instead.

Jonas Wilms · Accepted Answer · 2017-08-01 13:50:14Z

0

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

edited Aug 1, 2017 at 13:50

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

answered Aug 1, 2017 at 13:44

arie

8523 gold badges15 silver badges31 bronze badges

2 Comments

arie Over a year ago

@Jonasw duh! fixed it (i doubt he wants to add it to body anyways, just something to use for an example)

Jonas Wilms Over a year ago

@snape no problem. I would still prefer $(document.body).append(innerHTML) anyways

Collectives™ on Stack Overflow

build dynamic table with innerHTML

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related