Question

这是我的jquery代码

$("document").ready(function() {
        $.getJSON("http://bluewingholidays.com/results.json", function(data) {
            $("#div-my-table").text("<table>");
            $.each(data, function(i, item) {
                $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
            });
            $("#div-my-table").append("</table>");
        });
    });

我想使用html表格将数据显示到网页

<table id="div-my-table">
    <tr><td></td></tr>
     <tr><td></td></tr>
     <tr><td></td></tr>
</table>

但什么都没发生？

Answer 1

我立即看到的一个问题是您需要将$("document")更改为$(document)。您希望传递文档对象而不是选择器。

$(document).ready(function(){...

Answer 2

append不会在jQuery中附加一些任意文本（尤其不是</table>）！它附加一个元素......你应该使用这样的代码：

// Content will contain the HTML code of your new table
var content = "";

$.each(data, function(i, item) {
    content += "<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>";
});   

// Set the HTML of your table to this new content
$("#div-my-table").html(content);

Answer 3

这里有很多不同的问题。

首先，$("document").ready(应为$(document).ready(。丢失报价。您想要传递document对象，而不是选择器。

其次，如果此代码未在bluewingholidays.com上运行，则此代码无法正常工作。这称为same origin policy。

第三，那不是你在jQuery中追加元素的方式。（注意：.text用于更改元素的文本，如果您将其发送为HTML，则会将其转义。）

当您在jQuery中追加HTML时，您不必首先附加开放标记，然后附加关闭标记。 jQuery希望您发送完整的HTML，而不是片段。

$(document).ready(function() {
    // This will only work if this code is on bluewingholidays.com
    $.getJSON("http://bluewingholidays.com/results.json", function(data) {
        $("#div-my-table").empty(); // this is already a table, so let's empty it
        $.each(data, function(i, item) {
            // You're appending HTML elements to other HTML elements
            // You are not appending text in the way you think
            $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>");
        });
        // You append HTML elements, not strings, so you don't need this line
        //$("#div-my-table").append("</table>");
    });
});

Answer 4

我假设您的表已经存在，所以这应该有效：

<table id="div-my-table">    </table>

并在脚本中处理返回的JSON：

$.each(data.Properties, function(i, item) {
    $("#div-my-table").append("<tr><td>" + item.id + ":" + item.title +  "</td><td>" + item.price + "</td></tr>");
});

使用jquery加载json文件

4 个答案: