使用 innerHTML 构建动态 table

Question

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

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

我尝试了两种方法：

第一个：

    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

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

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>

Answer 2

起初，循环可以使事情变得更容易（字符串文字也是如此），因此可以简单地显示所有对象值：

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

并且you.may想和html做某事:

document.body.innerHTML += html;

A small demo

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 添加到页面，具体取决于您要添加 table 的位置。这会将其附加到正文中：

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

或将正文设置为您的 html:

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

使用 innerHTML 构建动态 table

build dynamic table with innerHTML

javascript

html-table

innerhtml