JSFiddle - React, Tailwind, and code Playground
HTML
<table id="cupFinals" border=1 px>
<tbody id="matchData"></tbody>
</table>
JavaScript
var jsData = new Array();
jsData[0] = {
Location: "Uruguay",
Year: 1930,
Winner: "Uruguay",
WinScore: 4,
Loser: "Argentina",
LosScore: 2
};
jsData[1] = {
Location: "Italy",
Year: 1934,
Winner: "Italy",
WinScore: 2,
Loser: "Czechoslovakia",
LosScore: 1
};
jsData[2] = {
Location: "France",
Year: 1938,
Winner: "Italy",
WinScore: 4,
Loser: "Hungary",
LosScore: 2
};
jsData[3] = {
Location: "Brazil",
Year: 1950,
Winner: "Uruguay",
WinScore: 2,
Loser: "Brazil",
LosScore: 1
};
jsData[4] = {
Location: "Switzerland",
Year: 1954,
Winner: "West Germany",
WinScore: 3,
Loser: "Hungary",
LosScore: 2
};
// Draw table from 'jsData' array of objects
function drawTable(tbody) {
var tbody = document.getElementById("matchData");
var headerNames = Object.getOwnPropertyNames(jsData[0]);
var columnCount = headerNames.length;
//Add the header row.
var row = tbody.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = headerNames[i];
row.appendChild(headerCell);
}
var tr, td;
// loop through data source
for (var i = 0; i < jsData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "center");
td.innerHTML = jsData[i].Location;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].Year;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].Winner;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].WinScore;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].Loser;
td = tr.insertCell(tr.cells.length);
td.innerHTML = jsData[i].LosScore;
td = tr.insertCell(tr.cells.length);
}
}
drawTable("matchdata");