Question

如何从本地文件中检索JSON对象并使用jQuery将其显示在表中？以下是JSON文件（jsondata.json）的内容：

{
"scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ]
}

Answer 1

示例 - 演示http://jsfiddle.net/kVdZG/

您可以迭代并追加元素。

<table id='scores' border="1"></table>

JS -

var data = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] }


$(data.scores).each(function(index, element){  
     $('#scores').append('<tr><td> '+element[0]+' </td> <td> '+element[1]+' </td></tr>');       
})

Answer 2

jQuery没有提供任何将JSON格式化为HTML表的函数。 jQuery仅提供了迭代JSON对象和操作DOM所需的功能。但是，有一些jQuery插件可以做到这一点。

https://github.com/gajus/json-to-table

Answer 3

var json = { "scores" : [ ["3/1/2011", 610],["4/1/2011", 610],["5/1/2011", 610],["6/1/2011", 610], ["7/1/2011", 720], ["8/1/2011", 500], ["9/1/2011", 500] ] }

    $.each(json.scores,function(key,value){

        alert(key + " "+value)
    })

你可以在这里查看http://jsfiddle.net/atMa7/

jQuery函数使用JSON数据创建表

3 个答案: