2017-05-16 19 views
-1

基本的に、私はXMLファイルを読み込んでいますので、内容をはっきりと読めるようにしたいと思います。現在の方法では、私はそれを読むことを試みている、あなたは1つの長い行のコンテンツを取得します。JavaScriptを使用してXMLを「スタイル設定」しようとします。

TITLE:VAL

TITLE:VAL2

など、私はHTMLの改行タグを使用してみました、まだそれが動作していない私はむしろそれがしたいと思います。助言がありますか?それが今であるとしてここで出力されている:あなたは解決策を自分で見つけるためにしようとする努力をした場合https://gyazo.com/f98de4fc8941874aea27ad03750f6955?token=981b91ccbeae94c64a15b76e654708b9

<!DOCTYPE html> 
<html> 
<body> 

<div id="XMLDisplay"> 
    <p id="container"></p> 
</div> 

<script> 
var paragraph = document.getElementById("container"); 
var xmlhttp, xmlDoc; 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.open("GET", "Opdracht1XML.xml", false); 
     xmlhttp.send(); 
     xmlDoc = xmlhttp.responseXML; 
     x = xmlDoc.getElementsByTagName("CD")[0].childNodes; 
     z = xmlDoc.getElementsByTagName("CD") 
     for (k = 0; k < x.length; k++) {   
       y = xmlDoc.getElementsByTagName("CD")[k].firstChild; 
      for (i = 0; i < x.length; i++) //looping xml childnodes 
      {    
       if (y.nodeType == 1) { 
        var elements = y.nodeName; 
        var values = y.firstChild.nodeValue; 
        paragraph.append(elements + ": " + values); 
       } 
       y = y.nextSibling; 

      } 
      document.write("<br/>"); 
     } 
</script> 

</body> 
</html> 

答えて

0

、ソリューション感謝を自分自身を発見!

(溶液:

<script> 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     myFunction(this); 
    } 
    }; 
    xmlhttp.open("GET", "Opdracht1XML.xml", true); 
    xmlhttp.send(); 

function myFunction(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var table="<tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>"; 
    var x = xmlDoc.getElementsByTagName("CD"); 
    for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" + 
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue + 
    "</td><td>" + 
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + 
    "</td></tr>"; 
    } 
    document.getElementById("table").innerHTML = table; 
} 
</script> 

関連する問題