jQuery函數使用JSON數據創建表

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/