利用ajax读取xml文件并以表格形式显示 1 <!DOCTYPE html> 2 <html lang=”en”> 3 <head> 4 <meta charset=”UTF-8″> 5 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 6 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 7 <title>ajax—responseXML应用</title> 8 <style> 9 table { border-collapse: collapse;} 10 table td{text-align: center;} 11 table tr:nth-child(odd) {background-color: #e5eecc;} 12 table th{color:#fff;background-color: #888; border: 1px solid #888;font-size: 13px;padding: 3px; } 13 </style> 14 <script> 15 function loadXMLDoc() 16 { 17 var xmlhttp; 18 var txt,i; 19 20 xmlhttp=new XMLHttpRequest(); 21 xmlhttp.open(“GET”,”cd_catalog.xml”,true); 22 xmlhttp.send(); 23 xmlhttp.onreadystatechange=function() 24 { 25 if (xmlhttp.readyState==4 && xmlhttp.status==200) 26 { 27 xmlDoc=xmlhttp.responseXML; 28 txt=”<table border=’1′ align=’center’><tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>”; 29 title=xmlDoc.getElementsByTagName(“TITLE”); 30 artist=xmlDoc.getElementsByTagName(“ARTIST”); 31 country=xmlDoc.getElementsByTagName(“COUNTRY”); 32 company=xmlDoc.getElementsByTagName(“COMPANY”); 33 price=xmlDoc.getElementsByTagName(“PRICE”); 34 year=xmlDoc.getElementsByTagName(“YEAR”); 35 for (i=0;i<title.length;i++) 36 { 37 txt=txt +”<tr><td>”+title[i].childNodes[0].nodeValue +”</td><td>” 38 + artist[i].childNodes[0].nodeValue +”</td><td>” 39 + country[i].childNodes[0].nodeValue +”</td><td>” 40 + company[i].childNodes[0].nodeValue +”</td><td>” 41 + price[i].childNodes[0].nodeValue +”</td><td>” 42 + year[i].childNodes[0].nodeValue +”</td>” 43 +”</tr>”; 44 } 45 txt=txt +”</table>”; 46 document.getElementById(“myDiv”).innerHTML=txt; 47 } 48 } 49 } 50 </script> 51 </head> 52 <body> 53 <h2>我收藏的 CD :</h2> 54 <div id=”myDiv”></div> 55 <button type=”button” onclick=”loadXMLDoc()”>我的 CD</button> 56 </body> 57 </html>
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/37328.html
