javascript数组到表格布局损坏答案

【问题标题】：javascript array to table layout brokenjavascript数组到表格布局损坏
【发布时间】：2013-05-06 18:21:01
【问题描述】：

我有以下代码：

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/

【问题讨论】：

查看diz ...jsfiddle.net/zE2bH/71

标签： javascript jquery html html-table

【解决方案1】：

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

基本上表格标题需要脱离循环。还;您可以将<td></td> 用于空单元格。

【讨论】：

【解决方案2】：

希望对你有帮助

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

【讨论】：

【解决方案3】：

您没有使用任何<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 中，然后相应地用rows 填充table。请注意，这仅适用于不存在是否显示任何表格的条件的情况。

【讨论】：