Tryit Editor v1.4

<html>
<head>

<script type="text/javascript">
var xmlDoc;
if (window.ActiveXObject)
{// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");

var x=xmlDoc.getElementsByTagName("CD");

function show(i)
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
country=(x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue);
company=(x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue);
price=(x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue);

txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year+"<br />Country: "+country+"<br />Company: "+company+"<br />Price: "+price  ;

document.getElementById("show").innerHTML=txt;
}
</script>
</head>

<body>
<div id='show'>
Click on one of the table rows to display the full album information.
</div>
<br />
<script type="text/javascript">
document.write("<table border='1'>");
for (var i=0;i<x.length;i++)
{ 
document.write("<tr onclick='show(" + i + ")'>");
document.write("<td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
</script>

</body>
</html>
Your Result:
Edit the code above and click to see the result.
W3Schools.com - Try it yourself