javascript - 使用innerHTML构建动态表格

Question

我正在尝试使用innerHTML 在javascript 中构建动态表。

当Web应用程序运行时，它只打印console.log，但不构建表。

我尝试了两种方法:

第一:

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

第二:

(使用 body.innerHTML 或 node.innerHTML，应用程序会出错):

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


        })
    }

有人可以帮我告诉我我做错了什么吗？

Answer 1

首先，循环可以使事情变得更容易(字符串文字也是如此)，因此可以简单地显示所有对象值:

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

或者，如果您不喜欢文字，也可以使用串联:

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

你可能想用html做某事:

document.body.innerHTML += html;

A small demo