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

Answer 2

您需要使用现有元素的.innerHTML方法将函数生成的html写入文档。这是一个非常简单的例子，没有真正的数据。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

首先，您需要将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附加到页面，具体取决于您要添加表的位置。这会将它附加到身体上：

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

或将正文设置为你的html：

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

使用innerHTML构建动态表

3 个答案: