使用javascript在HTML表格中显示Json数据

我想使用javascript在html表中显示json文件数据，我希望我可以开始这样做的方式。 任何人都可以给我发送示例或教程来开始这样做。 （使用javascript在HTML表格中显示Json URL数据）该表将有2列。

Answer 1

这是一个例子：

http://jsfiddle.net/sEwM6/258/

我修改了现有的小提琴（ http://jsfiddle.net/mjaric/sEwM6/ ）以提高效率。 要了解有关jQuery中AJAX请求的更多信息，请访问http://api.jquery.com/jQuery.ajax/ 。 AJAX请求可以在没有jQuery等库的帮助下完成，但对于使用jQuery的初学者来说，它更容易一些。 如果您正在寻求学习Javascript，我建议您查找纯Javascript AJAX请求以了解正在发生的事情（ http://youmightnotneedjquery.com/#json ）。

drawTable和drawRow函数用于将JSON数据写入表中。 jQuery也被用于将文本写入HTML页面。 同样，这也可以在没有jQuery的情况下完成。 请参阅http://youmightnotneedjquery.com/#setting_html 。

$.ajax({ url: '/echo/json/', //Change this path to your JSON file. type: "post", dataType: "json", //Remove the "data" attribute, relevant to this example, but isn't necessary in deployment. data: { json: JSON.stringify([ { id: 1, firstName: "Peter", lastName: "Jhons"}, { id: 2, firstName: "David", lastName: "Bowie"} ]), delay: 3 }, success: function(data, textStatus, jqXHR) { drawTable(data); } }); function drawTable(data) { var rows = []; for (var i = 0; i < data.length; i++) { rows.push(drawRow(data[i])); } $("#personDataTable").append(rows); } function drawRow(rowData) { var row = $("") row.append($("" + rowData.id + "")); row.append($("" + rowData.firstName + "")); row.append($("" + rowData.lastName + "")); return row; }