如何在多个 <td> 元素中显示存储在一个变量中的所有内容？答案

【问题标题】：How do I display all the content stored in one variable within several <td> elements?如何在多个 <td> 元素中显示存储在一个变量中的所有内容？
【发布时间】：2019-01-22 17:32:36
【问题描述】：

我有一个名为 jogos2018 的变量，它存储两个对象（jogos1 和 jogos2），这两个对象中的每一个都包含多个属性。

我想将两个对象显示为 html 标记 <tr>，并将每个内容显示为一个单元格 <td>。

我怎样才能巧妙地完成这个动作？

我试着把它们都写出来，但是我有超过 50 个对象，所以要花很长时间才能完成。有没有更快的方法来完成它？

<!DOCTYPE html>
<html>
<head>
    <style>
        tr {
            background-color: red;
        }
    </style>
</head>

<body onload="myFunction()">
    <table id="table_calendario_jogos">
        <tbody>
            <tr id="table_header">
                <th>Data</th>
                <th>Hora</th>
                <th>Oponente</th>
                <th>Placar</th>
                <th>Torneio</th>
                <th>Temporada</th>
                <th>Local</th>
                <th>Mais</th>
            </tr>
        </tbody>

        <tbody id="tbody_calendario_jogos">
        </tbody>
    </table>

    <script>
        var jogos2018 = {
            jogo1: {
                Data: "11/03/2018",
                Hora: "15:00h",
                Imagem: "",
                Oponente: "BMC",
                Placar: "V, 52-42",
                Torneio: "LSB",
                Temporada: "Regular",
                Local: "Ginásio Miécimo da Silva",
                Mais: "Mais+"
            },

            jogo2: {
                Data: "13/07/2018",
                Hora: "18:00h",
                Imagem: "",
                Oponente: "UERJ",
                Placar: "V, 67-32",
                Torneio: "LSB",
                Temporada: "Regular",
                Local: "Ginásio Miécimo da Silva",
                Mais: "Mais+"
            }
        };

        function myFunction() {
            var tableRow = document.createElement("TR");

            tableRow.setAttribute("id", "jogos2018_TR");
            document.getElementById("tbody_calendario_jogos").appendChild(tableRow);

            /* Data JOGO 1 - BMC 11/04/2018 */
            var tableData = document.createElement("TD");
            var tableJogosData = document.createTextNode(jogos2018.jogo1.Data);

            tableData.appendChild(tableJogosData);
            document.getElementById("jogos2018_TR").appendChild(tableData);
        }
    </script>
</body>
</html>

【问题讨论】：

看看这里：reactjs.org/docs/introducing-jsx.html
您可以为此使用库。我的建议是 react-table react-table.js.org/#/story/simple-table

标签： javascript arrays performance html-table

【解决方案1】：

您可以动态创建表，请尝试以下示例

const jogos2018 = {
  jogo1: {
      Data: "11/03/2018",
      Hora: "15:00h",
      Imagem: "",
      Oponente: "BMC",
      Placar: "V, 52-42",
      Torneio: "LSB",
      Temporada: "Regular",
      Local: "Ginásio Miécimo da Silva",
      Mais: "Mais+"
  },

  jogo2: {
      Data: "13/07/2018",
      Hora: "18:00h",
      Imagem: "",
      Oponente: "UERJ",
      Placar: "V, 67-32",
      Torneio: "LSB",
      Temporada: "Regular",
      Local: "Ginásio Miécimo da Silva",
      Mais: "Mais+"
  }
};

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

const th1 = document.createElement('th');
const th2 = document.createElement('th');
const th3 = document.createElement('th');
const th4 = document.createElement('th');
const th5 = document.createElement('th');
const th6 = document.createElement('th');
const th7 = document.createElement('th');
const th8 = document.createElement('th');
const th9 = document.createElement('th');

th1.textContent = 'Data';
th1.textContent = 'Hora';
th1.textContent = 'Imagem';
th1.textContent = 'Oponente';
th1.textContent = 'Placar';
th1.textContent = 'Torneio';
th1.textContent = 'Temporada';
th1.textContent = 'Local';
th1.textContent = 'Mais';

thead.appendChild(th1);
thead.appendChild(th2);
thead.appendChild(th3);
thead.appendChild(th4);
thead.appendChild(th5);
thead.appendChild(th6);
thead.appendChild(th7);
thead.appendChild(th8);
thead.appendChild(th9);


for (const key in jogos2018) {
  const tr = document.createElement('tr');

  for (const item in jogos2018[key]) {
      const td = document.createElement('td');

      td.textContent = jogos2018[key][item];

      tr.appendChild(td);
  }

  tbody.appendChild(tr);
}

table.appendChild(thead);
table.appendChild(tbody);

document.querySelector('#root').appendChild(table);

tr {
    background-color: red;
}

&lt;div id="root"&gt;&lt;/div&gt;

这样你可以添加 n 个对象，然后会渲染一个新行

【讨论】：