Question

我试图编写一个函数displayTable(presidents)，它接受一系列总统对象。每个总统对象都有属性名称，takeOffice，leftOffice。

对于每位总统，我想在id和＃34;总统＆＃34;中添加一行。将名称放在第一列中，takeOffice放在第二列中，leftOffice放在第三列中。

我不断在输出中获得undefined

这是我的尝试 - 首先是html

<div id="output">
    <table id="presidents">
        <tr>
            <th>President</th><th>Took office</th><th>Left office</th>
        </tr>
    </table>
</div>

这是javascript

function  displayTable(presidents){
    for(var i = 1; i < presidents.length; i++){
      var row =  document.getElementById("presidents").insertRow(i);

        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = presidents.name;
        cell2.innerHTML = presidents.tookOffice;
        cell3.innerHTML = presidents.leftOffice;
    }
}

我知道我已经接近但无法弄清楚

Answer 1

您必须如此简单地访问您的阵列

presidents[i].name;
presidents[i].tookOffice;
presidents[i].leftOffice;

另外，我建议完全组装你的html片段，然后插入总片段。每次插入的方式都会导致浏览器重新渲染，这在处理表时更加昂贵。如果您一次插入所有片段，就会有＃rows *＃cells * 2 +＃rows渲染调用而不是1个渲染调用。

Answer 2

我知道我很亲密，但无法弄清楚

实际上真的很近。看看你的代码。当您设置单元格的innerHTML时，您将引用整个总统数组，而不是特定条目。 cell1.innerHTML = presidents[i].name是你想要的。

在任何现代浏览器中查看开发人员工具，以帮助您更好地调试浏览器中正在进行的操作。它们都提供了出色的javascript调试器和大量其他功能，可以帮助您进行Web开发。

HTML模板

现在，通过HTML模板更好地完成您要做的事情。使用HTML模板，您可以构建您希望html看起来像什么的通用模板，然后使用您在javascript或AJAX调用中生成的数据填充模板。下面是使用名为Handlebars的模板引擎尝试执行的操作的示例。那里有很多优秀的模板引擎，Handlebars就是其中之一。

http://handlebarsjs.com/
http://javascriptissexy.com/handlebars-js-tutorial-learn-everything-about-handlebars-js-javascript-templating/

<body>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js">

<script id="presidents-table-template" type="text/x-handlebars-template">
    <table id="presidents">
            <tr>
                <th>President</th><th>Took office</th><th>Left office</th>
            </tr>
            {{#each presidents}}
                <tr>
                    <td>{{name}}</td>
                    <td>{{tookOffice}}</td>
                    <td>{{leftOffice}}</td>
                </tr>
            {{/each}}
        </table>
    </div>
</script>

<script>

    var source = $("#presidents-table-template").html(),
        template = Handlebars.compile(source);

    var data = {
        "presidents" : [
            {
                tookOffice : 1990,
                leftOffice : 1994,
                name : "Ziggy"
            },
            {
                tookOffice : 1994,
                leftOffice : 1998,
                name : "Doyle"
            },
            {
                tookOffice : 1998,
                leftOffice : 2002,
                name : "Eduardo"
            },
        ]
    };

    var html = template(data);
    $("body").html(html);


</script>

输出具有属性的对象数组

2 个答案: