JSON表不会显示

时间:2013-11-20 14:14:54

标签: json html-table

我想从JSON中获取一些数据并将其放入表中。 Firefox和Chrome仅显示空白页面。 Webconsole没有发布任何错误。我的代码怎么了?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
        $.getJSON('./url.php', function(data) {
            var cars = data.rec.vehicles.vehicles;
            $.each(cars, function(key, data){
                console.log(data.carName);
                $('#usertable').append(
                    function() {
                        return "<tr>"+
                                    "<td>"+data.carName+"</td>"+
                                    "<td>"+data.model+"</td>"+
                                    "<td>"+data.fuelState+"</td>"+
                                    "<td>1</td>"+
                                "<tr>"; 
                    }
                );
            })
        });
    });
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

HTML中没有ID usertable的元素。 jQuery无法将tr元素附加到。

HTML:

<table id="usertable">
</table>

JavaScript的:

var cars = [{
    carName: "Car 1",
    model: "model 1",
    fuelState: "full"
}, {
    carName: "Car 2",
    model: "model 2",
    fuelState: "full"
}, {
    carName: "Car 3",
    model: "model 1",
    fuelState: "half"
}, {
    carName: "Car 4",
    model: "model 2",
    fuelState: "half"
}, {
    carName: "Car 5",
    model: "model 1",
    fuelState: "empty"
}];

$.each(cars, function (key, data) {
    console.log(data.carName);
    $('#usertable').append(

    function () {
        return "<tr>" +
            "<td>" + data.carName + "</td>" +
            "<td>" + data.model + "</td>" +
            "<td>" + data.fuelState + "</td>" +
            "<td>1</td>" +
            "<tr>";
    });
})

请参阅http://jsfiddle.net/lutzhorn/v6A3A/4/