2014-01-06 3 views
1

안녕하세요. 현재 다음 XML 파일과 스크립트가 있습니다.자바 스크립트를 사용하여 XML 데이터를 HTML로 표시

<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.

+0

XSLT를 사용하여 XML 데이터를 표시 할 수 있습니다. javascript로 xml을 파싱하는 것보다 더 빠를 수도 있습니다. http://www.w3schools.com/xsl/default.asp – kwelsan

답변

2

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 테이블 구조를 만들 수 있습니다.

+0

Thanks !!! 마법처럼 작동합니다! :디 – user3128861

0

내가 값을 ... 얻고있다.

맞춤법 오류를 확인하십시오. 그리고 수정했습니다 document.write(x[i].getElementsByTagName("ResourcesInfo")[0].childNodes[0].nodeValue); to

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

BTW 예상되는 결과는 무엇입니까? 여기 당신을 위해 구문 분석 로직을 수정 한

enter image description here

관련 문제