将外部Json加载到HTML表 [英] Load External Json to HTML Table
本文介绍了将外部Json加载到HTML表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个名为 members.json
的外部Json.我喜欢使用Jquery从Json文件中将数据加载到HTML表中,但是不知何故.
I have an external Json named members.json
. I like to load the data to HTML table from the Json file by using Jquery, but somehow it doesn't work.
请帮助.
Json
{"data":
[
{
name: "Keely Luther",
email: "kluther@abc.com",
phone: "617 465 6314",
id : "1235-454676",
plan : "Plan A",
type : "New Medic",
group : "ABC-1",
status: "Approved"
},
{
name: "Mike Jenson",
email: "mike_j@yahoo.com",
phone: "943 355 0193",
id : "1235-478948",
plan : "Plan A",
type : "New Medic",
group : "ABC-1",
status: "Cancelled"
}
]
}
.JS
$(document).ready( function() {
$.getJSON('members.json',
function(data) {
$("#Table").html(" FirstLastMiddle");
for (var i = 0; i < data.length; i++)
{
var tr="";
var td1=""+data[i]["name"]+"";
var td2=""+data[i]["email"]+"";
var td3=""+data[i]["phone"]+"";
var td4=""+data[i]["id"]+"";
$("#Table").append(tr+td1+td2+td3+td4);
}
});
});
HTML
<table id="Table" width="90%" border="1" bordercolor="#ccc">
推荐答案
这是一种解决方法.
$(function () {
$.getJSON('members.json', function(data) {
var table = $("#Table").empty();
$.each(data, function (i, member) {
$("<tr>", {
html: [
$("<td>", { html: member.name }),
$("<td>", { html: member.email }),
$("<td>", { html: member.phone }),
$("<td>", { html: member.id })
],
appendTo: table
});
});
});
});
这篇关于将外部Json加载到HTML表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文