用innerHTML建立动态表 [英] build dynamic table with innerHTML

问题描述

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

I'm trying to build a dynamic table in javascript with innerHTML.

该Web应用程序运行时，仅打印console.log，但不构建表.

When the web app runs, it only prints the console.log, but doesn't build a 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，应用程序出错):

(with body.innerHTML or node.innerHTML, the app makes a mistake) :

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


        })
    }

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

Can somebody help tell me what I'm doing wrong?

推荐答案

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

At first, loops can make things easier (and string literals too), so may simply display all object values:

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

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

Or if you dont like the literals, same works with concatenation too:

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;

一个小演示

这篇关于用innerHTML建立动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！