Javascript 使用innerHTML构建动态表

我正在尝试用javascript和innerHTML构建一个动态表

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

success:函数（数据、状态、jqXHR）{
$.each（数据、函数（索引、数据）{
控制台日志（dati）
var html=“\n”+
“\n”+
“dati.codiceCOmmessa\n”+
“dati.commessaMainSub\n”+
“dati.setToReclient\n”+
“dati.nomeCliente\n”+
“dati.titoloQuals\n”+
“dati.keyWordsTopic\n”+
“dati.keywords活动\n”+
“dati.anno\n”+
“数据化数据\n”+
“dati.dataFine\n”+
“数据引用对象\n”+
“dati.ReferenceDoc\n”+
“dati.sviluppatore\n”+
“数据路径\n”+
“\n”+
""
html.innerHTML；
})
},

第二：

（对于body.innerHTML或node.innerHTML，应用程序会出错）：

success:函数（数据、状态、jqXHR）{
$.each（数据、函数（索引、数据）{
控制台日志（dati）
innerHTML=“\n”+
“\n”+
“dati.codiceCOmmessa\n”+
“dati.commessaMainSub\n”+
“dati.setToReclient\n”+
“dati.nomeCliente\n”+
“dati.titoloQuals\n”+
“dati.keyWordsTopic\n”+
“dati.keywords活动\n”+
“dati.anno\n”+
“数据化数据\n”+
“dati.dataFine\n”+
“数据引用对象\n”+
“dati.ReferenceDoc\n”+
“dati.sviluppatore\n”+
“数据路径\n”+
“\n”+
""
})
}

---

有人能告诉我我做错了什么吗

您需要使用现有元素的

.innerHTML

方法将函数生成的html写入文档。下面是一个没有实际数据的非常简单的示例

var success=函数（数据、状态、jqXHR）{
$.each（数据、函数（索引、数据）{
控制台日志（dati）
var html=“\n”+
“\n”+
“dati.codiceCOmmessa\n”+
“dati.commessaMainSub\n”+
“dati.setToReclient\n”+
“dati.nomeCliente\n”+
“dati.titoloQuals\n”+
“dati.keyWordsTopic\n”+
“dati.keywords活动\n”+
“dati.anno\n”+
“数据化数据\n”+
“dati.dataFine\n”+
“数据引用对象\n”+
“dati.ReferenceDoc\n”+
“dati.sviluppatore\n”+
“数据路径\n”+
“\n”+
""
document.getElementById（'wrapper'）.innerHTML=html；
})
};
成功（[0,1]，null，null）
首先，循环可以使事情变得更简单（字符串文字也可以），因此可以简单地显示所有对象值：

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

首先，您需要将dati.variables附加到字符串中，而不是将其作为字符串本身的一部分，如：

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"

或者将正文设置为html：

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

dati.keyWordsTopic
是变量，可以像
“+dati.keyWordsTopic+”\n“++
那样尝试。您需要编写您在某处创建的字符串，这意味着您需要调用元素的
.innerHTML
，才能在页面上实际写入此内容。所有dati都是变量您已经添加了“dati.titoloQuals”元素值是变量。。。您需要：“+dati.titoloQuals+”。
html
是一个字符串，那么在
html.innerHTML？您可能需要启发解释为字符串的变量的OP？@TezWingfield也许我需要，但我认为这超出了问题的范围。另外，其他地方还有很多更好的答案，所以我宁愿他检查一下。总是写漂亮的代码，永远离不开你哈哈：P@tez那是讽刺吗/哈哈，是的。。。极大的恭维。我只知道当你在附近的时候，我不会发布答案。（+1）@tez wingfield当t.j.crowder、bergi或pointy在场时，我也会遇到同样的情况……）@乔纳斯·杜！修复了它（我怀疑他是否想把它添加到身体上，只是举个例子）@snape没问题。无论如何，我还是更喜欢$（document.body）.append（innerHTML）
document.body.innerHTML += html;

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"

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

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