Creating a table in Javascript

Question

I am reading data from an XML file then displaying it in a table in Javascript. However, only the first row displays well and the rest of the rows dont as follows:

    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;

    }

The data gets displayed as follows:

                 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

The XML Data:

    <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>

What could i be doing wrong?

limc · Accepted Answer · 2014-01-17 10:40:14Z

2

The closing tag for table is in the for-loop. You need to put it outside the for-loop:-

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;

answered Jan 17, 2014 at 10:40

limc

40.3k22 gold badges106 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mutiemule Over a year ago

Thank you, cant understand how I took so long to notice that.

limc Over a year ago

In programming world, sometimes shit like this happens to everyone, including me. :)

Collectives™ on Stack Overflow

Creating a table in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related