W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <style> table,th,td { border : 1px solid black; border-collapse: collapse; } th,td { padding: 5px; } </style> <body> <p>请点击某个曲目,可显示专辑信息。</p> <p id='showMUSIC'></p> <table id="demo"></table> <script> var x,xmlhttp,xmlDoc xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "/demo/music_list.xml", false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("TRACK"); table="<tr><th>艺术家</th><th>曲目</th></tr>"; for (i = 0; i <x.length; i++) { table += "<tr onclick='displayMUSIC(" + i + ")'><td>"; table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue; table += "</td><td>"; table += x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue; table += "</td></tr>"; } document.getElementById("demo").innerHTML = table; function displayMUSIC(i) { document.getElementById("showMUSIC").innerHTML = "<ul>" + "<li>曲目:" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>艺术家:" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>专辑:" + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>国家:" + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>公司:" + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>年份:" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + "</ul>"; } </script> </body> </html>