下午好。我想要完成的是使用已发送给我的JSON创建表。如果JSON文件包含表的单个块，则一切正常。但是，多个表是一个问题。下面是一个JSON的示例，其中包含两个表的数据以及我到目前为止将JS构建到HTML中的JS，我也包含了这些表。任何见解都将非常感激。提前谢谢
[
{
"table": {
"tableDetails": [
{
"filecreatedate": "8/28/2014 10:43:08 AM",
"Name": "Personal Loans",
"PrintUrl": "print friendly url here",
"EffectiveDate": "3/7/2014",
"disclosure": "disclosure "
}
],
"headers": [
{
"Header1": "Personal Loans",
"Header2": "Loan Amount",
"Header3": "Fee",
"Header4": "APR",
"Header5": "Calculator"
}
],
"columns": [
{
"PersonalLoans": "VISA Platinum Rewards",
"LoanAmount": "$1000 - $25,000",
"Fee": "$0.00",
"APR": "9.15%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "VISA Platinum Low Rate",
"LoanAmount": "$500 - $25,000",
"Fee": "$0.00",
"APR": "8.15%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "Cash-in-a-Flash",
"LoanAmount": "$500 [1]",
"Fee": "$30.00",
"APR": "17.90%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"PersonalLoans": "Lifestyle Loan",
"LoanAmount": "$500 - $5000",
"Fee": "$0.00",
"APR": "10.99%",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
}
]
}
},
{
"table": {
"tableDetails": [
{
"filecreatedate": "8/28/2014 10:43:34 AM",
"Name": "Fixed Rate Second Mortgage",
"PrintUrl": "print friendly url here",
"EffectiveDate": "5/1/2014",
"disclosure": "disclosure text"
}
],
"headers": [
{
"Header1": "Loan Amount",
"Header2": "APR LTV <=80%",
"Header3": "APR LTV 80.01-90%",
"Header4": "Note",
"Header5": "Calculator"
}
],
"columns": [
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "5.950%",
"APR LTV 80.01-90%": "6.700%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.200%",
"APR LTV 80.01-90%": "6.950%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "6.450%",
"APR LTV 80.01-90%": "7.200%",
"Note": "10 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "6.200%",
"APR LTV 80.01-90%": "6.950%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.450%",
"APR LTV 80.01-90%": "6.950%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "6.700%",
"APR LTV 80.01-90%": "7.450%",
"Note": "15 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$50,000+",
"APR LTV <=80%": "6.500%",
"APR LTV 80.01-90%": "7.250%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$49,999-25,000",
"APR LTV <=80%": "6.750%",
"APR LTV 80.01-90%": "7.500%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
},
{
"Loan Amount": "$24,999-5,000",
"APR LTV <=80%": "7.000%",
"APR LTV 80.01-90%": "7.750%",
"Note": "20 Yr",
"Calculator": "<a href='#'><img src='img/calc.gif' alt='Calculator' /></a>"
}
]
}
}
和JS：
$("table#tbl").wrap("<div class='rate_table' />");
$("table#tbl").append("<tbody></tbody>");
var a = {};
$.getJSON("path/taken/out/for/SO", function(b) {
a = b;
$.each(a, function(e, c) {
for (var f = 0; f < c.table.tableDetails.length; f++) {
$("table#tbl").before(c.table.tableDetails[f].Name);
}
});
$.each(a, function(e, c) {
for (var f = 0; f < c.table.headers.length; f++) {
$("table#tbl thead").append('<th class="col_0">' + c.table.headers[f].Header1 + '</th><th class="col_1">' + c.table.headers[f].Header2 + '</th><th class="col_2">' + c.table.headers[f].Header3 + '</th><th class="col_3">' + c.table.headers[f].Header4 + '</th><th class="col_4">' + c.table.headers[f].Header5 + "</th>");
}
});
$.each(a, function(e, c) {
for (var f = 0; f < c.table.columns.length; f++) {
$("table#tbl tbody").append("<tr><td>" + c.table.columns[f].PersonalLoans + "</td><td>" + c.table.columns[f].LoanAmount + "</td><td>" + c.table.columns[f].Fee + "</td><td>" + c.table.columns[f].APR + "</td><td>" + c.table.columns[f].Calculator + "</td></tr>");
}
});
$.each(a, function(e, c) {
for (var f = 0; f < c.table.tableDetails.length; f++) {
$("p.rateDisclosure").append(c.table.tableDetails[f].disclosure);
}
});
});
所有这些都是使用以下html构建一个表
<table id="tbl">
<thead></thead>
</table>
<p class="rateDisclosure"> </p>
答案 0 :(得分：1)
在循环中处理JSON数据并动态添加表而不是依赖于静态元素（注入table元素而不是将其放在html中）。
（如果你不关心其他表，只需抓住第一个索引并将其传递给渲染例程而不是循环。）
以下是使用您的JSON示例响应动态呈现多个表的示例小提琴：http://jsfiddle.net/6wdksrkp/2/
代码解决方案：
$.getJSON("path/taken/out/for/SO", function(tables) {
// this is the ajax callback code, goes inside your ajax function
if (tables) {
for (var i = 0, len = tables.length; i < len; i++) {
RenderTable(tables[i]);
}
}
}
function RenderTable(tableDef) {
// create table element template dynamically as a fragment before adding to DOM
var $tbl = $("<table><thead></thead><tbody></tbody></table>");
// wrap the table in a div (for styling and identification)
$tbl.wrap("<div class='rate_table' />");
// render the table name before the table element
var a = tableDef;
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$tbl.before(c.tableDetails[f].Name);
}
});
// render column headers in THEAD
$.each(a, function (e, c) {
for (var f = 0; f < c.headers.length; f++) {
$tbl.children("thead").append('<th class="col_0">' + c.headers[f].Header1 + '</th><th class="col_1">' + c.headers[f].Header2 + '</th><th class="col_2">' + c.headers[f].Header3 + '</th><th class="col_3">' + c.headers[f].Header4 + '</th><th class="col_4">' + c.headers[f].Header5 + "</th>");
}
});
// render the columns' data in TBODY
$.each(a, function (e, c) {
for (var f = 0; f < c.columns.length; f++) {
$tbl.children("tbody").append("<tr><td>" + c.columns[f].PersonalLoans + "</td><td>" + c.columns[f].LoanAmount + "</td><td>" + c.columns[f].Fee + "</td><td>" + c.columns[f].APR + "</td><td>" + c.columns[f].Calculator + "</td></tr>");
}
});
// update rate disclosure
$.each(a, function (e, c) {
for (var f = 0; f < c.tableDetails.length; f++) {
$("p.rateDisclosure").append(c.tableDetails[f].disclosure);
}
});
// inject the table fragment into the DOM (thus showing the table)
$(document.body).append($tbl);
}