How do I display all the content stored in one variable within several <td> elements?

I have a variable called jogos2018 which store two objects (jogos1 and jogos2) and each one of these two contain several properties.

I want to display both objects as the html tag <tr> and each content to be a cell <td>.

How do I make this move in a clever way?

I tried to write all of them, however I have more than 50 objects, so it's going to take too long to make it. Is there any faster way to accomplish it?

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

1 answer

  • answered 2019-01-22 01:06 user615274

    You can create tables on the fly please try the following example

    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>

    This way you can add n objects and a new row will be rendered