Question

我有以下代码：

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();

我想要以下布局：

Dates |  Prices |  Available

我希望我的代码填充日期值，但我也希望填充空行，以便用户可以手动输入值。

这是我的JSFIDDLE：http://jsfiddle.net/zE2bH/67/

Answer 1

您没有使用任何<th></th>标签。这些在您的表格中定义header。

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

由于table和header是静态的，我只是将其留在HTML中，并且只相应地用table填充rows。请注意，这仅适用于是否存在关于是否显示任何表的条件。

Answer 2

试试这个：http://jsfiddle.net/rkaEA/

基本上表格标题需要不在循环中。也;您可以将<td></td>用于空单元格。

Answer 3

希望它会有所帮助

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

javascript数组到表格布局坏了

3 个答案: