Question

在我的JS代码中，我使用以下方法在网页上显示表格：

function display(data) {
    var photoUrls = data.photoUrls;
    var tbl=$("<table/>").attr("id","mytable");
    for(var i=0;i<photoUrls.length;i++)
    {
        console.log("single row: "+photoUrls[i]);
        var row = "<tr><td>"+photoUrls[i]+"</td></tr>";
        $("#mytable").append(row);
    }
    var outcome = "<h4>Photo URLs:</h4>";

    $('#feedback').html(outcome+tbl);
}

我没有看到表格，而是看到：

Photo URLs:
[object Object]

这很奇怪，因为控制台日志在控制台中显示了适当的名称，因此我希望它能够正确显示表。那我的代码怎么了？

Answer 1

您要在console.log中串联字符串。在最后一行中，您尝试在字符串和对象之间使用+。这将导致对象通过.toString()转换为字符串。对象通常字符串化为“ [object Object]”。

最简单的解决方法（尽管不一定是最好的）是使用此方法：

function display(data) {
    var photoUrls = data.photoUrls;
    var tbl=$("<table/>").attr("id","mytable");
    for(var i=0;i<photoUrls.length;i++)
    {
        console.log("single row: "+photoUrls[i]);
        var row = "<tr><td>"+photoUrls[i]+"</td></tr>";
        tbl.append(row); /* fix 1 */
    }
    var outcome = "<h4>Photo URLs:</h4>";

    $('#feedback').append(outcome).append(tbl); /* fix 2 */
}

#mytable在文档中不存在，因此$('#mytable')生成了一个空的jQuery集合，因此结尾的.append()并没有实现任何目的。（当对空集合执行操作时，jQuery通常不会失败，因此这会使新开发人员措手不及。）
与其尝试串联字符串，不如直接将它们附加到目标上。（jQuery有一些神奇之处，因此它通常可以接受字符串，元素或jQuery集合。）

为什么我在HTML中看到[object object]而不是表格的内容？

1 个答案: