zig Tryit Editor

<!DOCTYPE html>
<html>

<head>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>

<body>

<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>

function loadCD() {
    let table = "<tr><th>Artist</th><th>Title</th></tr>";
    for (let i = 0; i < cd.length; i++) {
      table += "<tr onclick='displayCD(" + i + ")'><td>";
      table += cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
      table += "</td><td>";
      table += cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
      table += "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
  }

function displayCD(i) {
    document.getElementById("showCD").innerHTML =
      "Artist: " +
      cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "<br>Title: " +
      cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
      "<br>Year: " +
      cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
  }
</script>

</body>

</html>