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;

在Javascript中创建表

1 个答案: