使用Javascript創建表格

Question

我正在從XML文件讀取數據，然後在Javascript中的表格中顯示它。然而，只有第一行顯示以及與行的其餘部分不如下：

results = "<table class= \"table table-condensed table-hover table-bordered table-striped\">"; 
    results += "<caption>Payment History</caption>"; 
    results += "<thead>"; 
    results += "<tr>"; 
    results += "<th>User</th>"; 
    results += "<th>Video Name</th>"; 
    results += "<th>Payment Date</th>"; 
    results += "<th>Time</th>"; 
    results += "</tr>"; 
    results += "</thead>"; 
    results += "<tbody>"; 

    for (var index = 0; index < items.length; index++) 
    { 
     var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0]; 
     var VideoNumElement = items[index].getElementsByTagName("videonumber")[0]; 
     var dateElement = items[index].getElementsByTagName("paymentdate")[0]; 
     var timeElement = items[index].getElementsByTagName("paymenttime")[0]; 

     if (deviceNumElement && VideoNumElement && dateElement && timeElement) 
     { 
      deviceNum[index] = deviceNumElement.firstChild.data; 
      videoNum[index] = VideoNumElement.firstChild.data; 
      paidDate[index] = dateElement.firstChild.data; 
      paidTime[index] = timeElement.firstChild.data; 

      results += "<tr>"; 
      results += "<td>"+ deviceNum[index] + "</td>"; 
      results += "<td>" + videoNum[index] + "</td>"; 
      results += "<td>" + paidDate[index] + "</td>"; 
      results += "<td>" + paidTime[index] + "</td>"; 
      results += "</tr>"; 
     } 

     results += " </tbody>"; 
     results += " </table>"; 

     alert(results); 

     var div = document.getElementById("paymentDetails"); 
     div.innerHTML = results; 

    } 

的數據如下獲取顯示：

    Payment History 
User   VideoName   Payment Date Time 
43CA3KZXYQGBK Animal Series  14-01-2014  14:12:20 
43CA3KZXYQGBKAnimalSeries10-01-201415:40:12 
43CA3KZXYQGBKAnimalSeries10-01-201403:21:15 
43CA3KZXYQGBKAnimalSeries10-01-201416:39:28 

XML數據：

<xml> 
<payments> 
    <devicenumber>43CA3KZXYQGBK</devicenumber> 
    <videonumber>1234567</videonumber> 
    <paymentdate>2014-01-11</paymentdate> 
    <paymenttime>19:38:19</paymenttime> 
</payments> 
<payments> 
    <devicenumber>43CA3KZXYQGBK</devicenumber> 
    <videonumber>1234567</videonumber> 
    <paymentdate>2014-01-10</paymentdate> 
    <paymenttime>19:38:19</paymenttime> 
</payments> 
<payments> 
    <devicenumber>43CA3KZXYQGBK</devicenumber> 
    <videonumber>1234567</videonumber> 
    <paymentdate>2014-01-01</paymentdate> 
    <paymenttime>19:38:19</paymenttime> 
</payments> 
<payments> 
    <devicenumber>43CA3KZXYQGBK</devicenumber> 
    <videonumber>1234567</videonumber> 
    <paymentdate>2014-01-09</paymentdate> 
    <paymenttime>19:38:19</paymenttime> 
</payments> 
</xml> 

我可能做錯了什麼？

Answer 1

table的結束標記位於for循環中。你需要把它放在for循環之外： -

for (var index = 0; index < items.length; index++) 
{ 
    var deviceNumElement = items[index].getElementsByTagName("devicenumber")[0]; 
    var VideoNumElement = items[index].getElementsByTagName("videonumber")[0]; 
    var dateElement = items[index].getElementsByTagName("paymentdate")[0]; 
    var timeElement = items[index].getElementsByTagName("paymenttime")[0]; 

    if (deviceNumElement && VideoNumElement && dateElement && timeElement) 
    { 
     deviceNum[index] = deviceNumElement.firstChild.data; 
     videoNum[index] = VideoNumElement.firstChild.data; 
     paidDate[index] = dateElement.firstChild.data; 
     paidTime[index] = timeElement.firstChild.data; 

     results += "<tr>"; 
     results += "<td>"+ deviceNum[index] + "</td>"; 
     results += "<td>" + videoNum[index] + "</td>"; 
     results += "<td>" + paidDate[index] + "</td>"; 
     results += "<td>" + paidTime[index] + "</td>"; 
     results += "</tr>"; 
    } 
} 

    results += " </tbody>"; 
    results += " </table>"; 

    alert(results); 

    var div = document.getElementById("paymentDetails"); 
    div.innerHTML = results;