javascript - 在 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;