javascript 使用javascript在HTML表格中显示Json数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24040285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Json data in HTML table using javascript
提问by user3707067
i want to display json file data in html table using javascript, i want the way i can start doing that. can anyone send me example or tutorials to start doing that. ( Display Json URL data in HTML table using javascript ) the table will have 2 column.
我想使用 javascript 在 html 表中显示 json 文件数据，我想要我可以开始这样做的方式。任何人都可以给我发送示例或教程来开始这样做。（使用 javascript 在 HTML 表中显示 Json URL 数据）该表将有 2 列。
回答by Jason
Here is an example:
下面是一个例子：
http://jsfiddle.net/sEwM6/258/
http://jsfiddle.net/sEwM6/258/
I modified an existing fiddle (http://jsfiddle.net/mjaric/sEwM6/) to be a little more efficient. To learn more about AJAX requests in jQuery see http://api.jquery.com/jQuery.ajax/. AJAX requests can be completed without the help of a library such as jQuery, however, it is a little easier for beginners with jQuery. If you are seeking to learn Javascript, I would recommend looking up pure Javascript AJAX requests to understand what is going on (http://youmightnotneedjquery.com/#json).
我修改了现有的小提琴 ( http://jsfiddle.net/mjaric/sEwM6/) 以提高效率。要了解有关 jQuery 中的 AJAX 请求的更多信息，请参阅http://api.jquery.com/jQuery.ajax/。AJAX 请求可以在没有 jQuery 之类的库的帮助下完成，但是，对于初学者来说，使用 jQuery 会容易一些。如果您正在寻求学习 Javascript，我建议您查找纯 Javascript AJAX 请求以了解正在发生的事情（http://youmightnotneedjquery.com/#json）。
The drawTable and drawRow functions are used to write the JSON data to the table. jQuery is also being used to write the text to the HTML page. Again, this can be done without jQuery as well. See http://youmightnotneedjquery.com/#setting_html.
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 = $("<tr />")
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
return row;
}
