使用 innerHTML 构建动态表

Posted 2023-05-07

【中文标题】使用 innerHTML 构建动态表

【英文标题】：build dynamic table with innerHTML

【发布时间】：2018-01-08 09:56:29

【问题描述】：

我正在尝试使用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>"


        )
    

谁能帮我告诉我我做错了什么？

【问题讨论】：

dati.keyWordsTopic 是变量，试试" <td>"+ dati.keyWordsTopic+"</td>\n" +

您需要将您创建的字符串写入某处，这意味着您需要调用元素的.innerHTML 才能将其实际写入页面。

所有数据都是变量

您已添加“

dati.titoloQuals”元素值是变量...您需要：“”+ dati.titoloQuals +“ "。

html 是一个字符串，那么您希望在html.innerHTML; 行中发生什么？

【参考方案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

【讨论】：

总是写漂亮的代码，永远离不开你哈哈：P

@tez 这是讽刺吗？ !/

哈哈是的... 一个巨大的赞美。我只知道当你在附近时我不会发布答案。 (+1)

@tezwingfield 当 t.j. crowder、bergi 或 pointy 都在附近.... ;)

【参考方案2】：

您需要使用现有元素的.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>

【讨论】：

您可能需要启发 OP 解释为字符串的变量？

@TezWingfield 也许我会，但我认为这超出了问题的范围。另外，在其他地方还有很多其他更好的答案，所以我宁愿他检查一下。

【参考方案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);

【讨论】：

@Jonasw duh！修复了它（我怀疑他是否想将它添加到正文中，只是用作示例）

@snape 没问题。我还是更喜欢 $(document.body).append(innerHTML) 反正