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:

    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?

回答1:

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

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

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

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

来源：https://stackoverflow.com/questions/45439408/build-dynamic-table-with-innerhtml

标签

javascript

html-table

innerhtml