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