Question

我有一个名为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>

Answer 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;
}

<div id="root"></div>

这样，您可以添加n个对象，然后将呈现新行

如何在几个元素中显示存储在一个变量中的所有内容？

1 个答案: