Question

对于任务，我需要显示相册列表＆＃39;标题和所有歌曲。但我只是为每张专辑收录了第一首歌。我该如何显示它们？我假设我需要更改索引值，但我不确定如何编写它以获取所有值。我的代码如下。

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 5px;
        }
    </style>

    <script>
     function loadDoc() {
     // This function will load the xml file and connect it to the webpage
        var xhttp = new XMLHttpRequest();
        // This is used to exchange data with the server, allowing for parts of the page to change without reloading the page
        xhttp.onreadystatechange = function() {
        // This defines a function to be called when the readystate property changes
           if (this.readyState == 4 && this.status == 200) {
           // This states that if the request is finished (readystate == 4) and the status returned is ok (this.staus == 200)
              extractSongs(this);
              // This runs the function to display the data from the xml file
           }
        };
        xhttp.open("GET", "CDLibrary.xml", true);
        // This gets the xml file
        xhttp.send();
        // This sends a request to the server 
     }
     function extractSongs(xml) {
     // This function will extract and display data from the xml file
      var i;
      var xmlDoc = xml.responseXML;
      // This returns the document containg a response to my request
      var table="<tr><th>Artist</th><th>Title</th></tr>";
      // This sets up the table
      var CdList = xmlDoc.getElementsByTagName("CD");
      // This creates an array of the data from the xml file
       for (i = 0; i <CdList.length; i++) {
       // This will loop through the array by the number of cds in the array
         table += "<tr><td>" +
         CdList[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
         "</td><td>" +
         CdList[i].getElementsByTagName("track")[0].childNodes[0].nodeValue +
         "</td></td>" ;
         // These display the elements by the tag name and generate them as table data
       }
      document.getElementById("CdCollection").innerHTML = table;
      // This gets the table from the html and makes it equal to the table from the javascript
     }  
    </script>
</head>

<body>
<h1>My CD Collection</h1>

 <button type="button" onclick="loadDoc()">Get my collection</button>
 <br><br>
  <table id="CdCollection"></table>
   </body>

Answer 1

我猜你需要for / title的第二个track循环： -

for (i = 0; i < CdList.length; i++) {

    var titleCount = CdList[i].getElementsByTagName("title").length;

    for (j = 0; j < titleCount; j++){

       // This will loop through the array by the number of cds in the array
       table += "<tr><td>" +
       CdList[i].getElementsByTagName("title")[j].childNodes[0].nodeValue +
       "</td><td>" +
       CdList[i].getElementsByTagName("track")[j].childNodes[0].nodeValue +
       "</td></td>";
       // These display the elements by the tag name and generate them as table data
    }
}

循环遍历整个数组 - 所有索引

1 个答案: