recorrer - tablas dinamicas html javascript

construir una tabla dinámica con innerHTML

Question

Intento crear una tabla dinámica en javascript con innerHTML. pero cuando se ejecuta la aplicación web, solo imprime console.log, pero no crea una tabla.

Lo intenté de dos maneras:

el primero:

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

y el segundo (whit body.innerHTML o node.innerHTML, la aplicación comete un error):

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


        })
    }

¿Alguien puede ayudarme? donde estoy equivocado?

Answer 1

Al principio, los bucles pueden facilitar las cosas (y también los literales de cadena), por lo que simplemente pueden mostrar todos los valores de los objetos:

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

O si no te gustan los literales, lo mismo funciona con la concatenación:

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

Y tú.puedes hacer algo con html :

document.body.innerHTML += html;

Una pequeña demostración

Answer 2

Primero necesita agregar las dati.variables a la cadena y no tenerlas como parte de la cadena en sí, como:

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"

Luego, debe agregar el html que creó a la página, dependiendo de dónde desee agregar la tabla. Esto lo agregará al cuerpo:

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

o configura el cuerpo a tu html:

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

Answer 3

.innerHTML método .innerHTML un elemento existente para escribir el html producido por su función en el documento. Aquí hay un ejemplo muy simple sin datos reales.

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>