使用JavaScript在HTML中顯示XML數據

您好目前我有以下XML文件和我的腳本。使用JavaScript在HTML中顯示XML數據

<ResourcesList> 
    <ResourceGroup type = "HUMANS"> 
     <ResourcesInfo JobPosition = "Station Manager"   OnDuty = "40" OnLeave_Local = "1" OnLeave_Oversea = "1" MC = "2" /> 
     <ResourcesInfo JobPosition = "Deputy Station Manager" OnDuty = "82" OnLeave_Local = "5" OnLeave_Oversea = "5" MC = "2" /> 
     </ResourceGroup> 
     <ResourceGroup type = "MACHINES"> 
     <ResourcesInfo MachineName = "Leopard 2SG"  MachineID = "SB1420J" MachineType = "Battle Tank"  Available = "15" NotAvailable = "2" /> 
     <ResourcesInfo MachineName = "M113A2 ULTRA OWS" MachineID = "SS4020J" MachineType = "Transport Vechicle" Available = "50" NotAvailable = "21" /> 
    </ResourceGroup> 
</ResourcesList>  

<script> 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.open("GET","ResourceList.xml",false); 
xmlhttp.send(); 
xmlDoc=xmlhttp.responseXML; 

document.write("<table border='1'>"); 

var x=xmlDoc.getElementsByTagName("ResourceGroup"); 
for (i=0;i<x.length;i++) 
    { 
    document.write("<tr><td>"); 
    document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue); 
    } 
document.write("</table>"); 
</script>

有人可以幫忙嗎？我跟着w3school的例子，試着寫出來，但它告訴我以下錯誤。

類型錯誤：x[i].getElementsByTagName(ResourcesInfo)[0].childNodes[0] is undefined.

來源

2014-01-06 user3128861

您可以使用XSLT顯示XML數據。這可能比用javascript解析xml更快。 http://www.w3schools.com/xsl/default.asp – kwelsan

Here，我已經修復解析邏輯爲您服務。

而且，這裏是神奇之處：

document.write("<table border='1'>"); 

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

for (i = 0; i < x.length; i++) { 
    document.write("<tr>"); 
    var y = x[i].getElementsByTagName("ResourcesInfo"); 
    for (j = 0; j < y.length; j++) { 
     if (x[i].getAttribute("type") == "HUMANS") { 
      document.write("<td>" + y[j].getAttribute('JobPosition') + "</td>"); 
     } else { 
      document.write("<td>" +y[j].getAttribute('MachineName') + "</td>"); 
     } 
    } 
    document.write("</tr>"); 
} 
document.write("</table>"); 
}

撥弄代碼來解析和創建所需的HTML表結構。

來源

2014-01-06 06:43:10

謝謝！它像魔術一樣工作！：d – user3128861

我得到的值......（雖然不確定，因爲他們沒有內部的任何文本）。

檢查拼寫錯誤。我已修改 document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue);至

document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0]);。

順便說一句你的預期產量是多少？這裏是我的截圖...

enter image description here

來源

2014-01-06 06:37:47

使用JavaScript在HTML中顯示XML數據

回答

相關問題