CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
PriceCheaperton
PriceCheaperton

Reputation: 5349

javascript array to table layout broken

I have the following code:

function test() {
    var results = "";
    var myArray = [];

    myArray[0] = "Thur May 09 2013 00:00:00 GMT+0100 (GMT Daylight Time)";
    myArray[1] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)";      
    myArray[2] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)"; 
    myArray[3] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)"; 

results = "<table border='1'>";
    for (var i = 0; i < myArray.length; i+=2 )

    {    
         results += "<td>Dates</td>";
         results += "<td>Price</td>";
         results += "<td>Available?</td>";
         results += "<tr><td>" + myArray[i+1] + "<tr><td>" + ( myArray[i+1]===undefined ? '' : myArray[i+1] )+ "</tr></td>"; 
    }

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

    var div = document.getElementById("associatedAssets");
    div.innerHTML = results;    
}
test();

I want the following layout:

Dates |  Prices |  Available

I want my code to populate the date values but I also want the empty rows to populate so the user can manually input the values.

Here is my JSFIDDLE: http://jsfiddle.net/zE2bH/67/

Upvotes: 0

Views: 100

Answers (3)

Menno
Menno

Reputation: 12621

You are not using any <th></th> tags. These define header in your table.

results = "<table border='1'>";
results += "<th>";
results +=     "<td>Dates</td>";
results +=     "<td>Price</td>";
results +=     "<td>Available?</td>";
results += "</th>";
for (var i = 0; i < myArray.length; i++ ) {    
    results += "<tr>";
    results +=     "<td>" + myArray[i] + "</td>";
    results +=     "<td>PRICE</td>";
    results +=     "<td>" + ( myArray[i]===undefined ? '' : myArray[i] )+ "</td>";
    results += "</tr>"; 
}
results += "<table>";

Since the table and header are static, I'd just leave these inside the HTML and only fill up the table with the rows accordingly. Note this is only applicible in case there's no condition as to whether or not show any table at all.

Upvotes: 1

AntonyManoj
AntonyManoj

Reputation: 157

Hope it will be helpful

<!DOCTYPE html>
<html>
<head>
<script>
    function test() {
        var results = "";
        var myArray = [];
        myArray[0] = "Thur May 09 2013 00:00:00 GMT+0100 (GMT Daylight Time)";
        myArray[1] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)";
        myArray[2] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)";
        myArray[3] = "Thur May 10 2013 00:00:00 GMT+0100 (GMT Daylight Time)";
        results = "<table border='1'><tr><td>Dates</td><td>Price</td><td>Available?</td></tr>";
        for ( var i = 0; i < myArray.length; i++)
        {
            var date = myArray[i + 1];
            if (date == undefined) {
                date = "";
            }
            results += "<tr><td>" + date
                    + "</td><td>price here</td><td>isAvailable here</td></tr>";
        }
        results += "<table><br /> <br />";
        var div = document.getElementById("associatedAssets");
        div.innerHTML = results;
    }
</script>
</head>
<body>
    <div id="associatedAssets"></div>
    <script>
        test();
    </script>
</body>
</html>

Upvotes: 1

Pablo
Pablo

Reputation: 2549

Try this: http://jsfiddle.net/rkaEA/

Basically the table title needs to be out of the loop. Also; you can use <td></td> for empty cells.

Upvotes: 1

Related Questions