我有一个名为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>
答案 0 :(得分:0)
您可以即时创建表格,请尝试以下示例
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个对象,然后将呈现新行