You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.7 KiB
48 lines
1.7 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Motörhead Songs</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th data-attr="title">Song Title</th>
|
||
|
|
<th data-attr="album">Album</th>
|
||
|
|
<th data-attr="year">Year *</th>
|
||
|
|
<th data-attr="rank">Rank</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
</table>
|
||
|
|
<script>
|
||
|
|
document.querySelectorAll("table").forEach((table) => {
|
||
|
|
const cols = [];
|
||
|
|
table.querySelectorAll("th[data-attr]").forEach((th) => {
|
||
|
|
cols.push(th.getAttribute("data-attr"));
|
||
|
|
});
|
||
|
|
|
||
|
|
fetch("/content.json")
|
||
|
|
.then((content) => content.json())
|
||
|
|
.then((json) => {
|
||
|
|
const tblBody = document.createElement("tbody");
|
||
|
|
|
||
|
|
json.forEach((jsonRow) => {
|
||
|
|
const tr = document.createElement("tr");
|
||
|
|
|
||
|
|
cols.forEach((colName) => {
|
||
|
|
const td = document.createElement("td");
|
||
|
|
td.innerText = jsonRow[colName];
|
||
|
|
tr.insertAdjacentElement("beforeend", td);
|
||
|
|
});
|
||
|
|
|
||
|
|
tblBody.insertAdjacentElement("beforeend", tr);
|
||
|
|
});
|
||
|
|
|
||
|
|
table.insertAdjacentElement("beforeend", tblBody);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|