【发布时间】：2016-01-06 03:23:19
【问题描述】：
将在外部 JSON 文件中创建的对象指向并填充到其相应的 html div 的确切方法是什么（javascript/jquery）。我正在发布 html 和 JSON 的完整代码。另请参阅图像以清楚了解 div 的位置以及它们保存的数据。这也应该发生在 HTML onLoad 事件中。
HTML 代码
第一个2
我的账户
<div class="MyMainSavings">
<div class="MyMainSavingsTop">
<table class="MyMainSavingsTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class="InterestRate">
</div>
<div class="regular">Regular</div>
</div>
<div class="MyMainSavingsBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyEverydayExpenses">
<div class="MyEverydayExpensesTop">
<table class="MyEverydayExpensesTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
<p></p>
</div>
<div class="regular">Regular</div>
</div>
<div class="MyEverydayExpensesBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyDeposit">
<div class="MyDepositTop">
<table class="MyDepositTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="MyDepositBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="FavDeposit">
<div class="FavDepositTop">
<table class="FavDepositTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="FavDepositBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
</div>
<div class="RightSection">
<div class="RightSectionTopLeft">I Owe (from 3 Accounts)</div>
<div class="RightSectionTopRight">-USD 33,4500.00</div>
<div class="HomeLoan">
<div class="HomeLoanTop">
<table class="HomeLoanTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate"></div>
<div class="regular">Regular</div>
</div>
<div class="HomeLoanBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="Ruby">
<div class="RubyTop">
<table class="RubyTop">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
</div>
<div class="regular">Regular</div>
</div>
<div class="RubyBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
<div class="MyOverdraft">
<div class="MyOverdraftTop">
<table class="MyOverdraftTop">
<tr>
<td>MyOverdraft</td>
</tr>
<tr>
<td></td>
</tr>
<td></td>
</table>
<div class=".InterestRate">
</div>
<div class="regular"></div>
</div>
<div class="MyOverdraftBottom">
<table class="tablebottom">
<tr>
<td></td>
<td class="right"></td>
</tr>
<tr>
<td></td>
<td class="right"></td>
</tr>
<td></td>
<td class="right"></td>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
JSON 文件
var mainObject = {
"Main": [{
"I_Have": [{
"MyMainSavings": {
"MyMainSavingsTop": {
"AccountName": "MyMainSavings",
"AccountNumber": "x726",
"Balance": "USD 5,600.00",
"Rate": ""
},
"MyMainSavingsBottom": [{
"Available": "Available",
"Value": "$4329"
}, {
"Clear": "Clear",
"Value": "$3456"
}, {
"Hold": "Hold",
"Value": "$5000"
}]
}
}, {
"MyEverydayExpenses": {
"MyEverydayExpensesTop": {
"AccountName": "MyMainSavings",
"AccountNumber": "x726",
"Balance": "USD 600.00",
"Rate": ""
},
"MyEverydayExpensesBottom": [{
"Available": "Available",
"Value": "$4329"
}, {
"Clear": "Clear",
"Value": "$3456"
}, {
"Hold": "Hold",
"Value": "$7300"
}]
}
}, {
"FavDeposit": {
"FavDepositTop": {
"AccountName": "MyMainSavings",
"AccountNumber": "x726",
"Balance": "USD 5,000.00",
"Rate": "@4.5%"
},
"FavDepositBottom": [{
"MaturityValue": "Maturity Value",
"Value": "$4009"
}, {
"Term": "Term",
"Value": "$1156"
}, {
"MaturesOn": "Matures On",
"Value": "$5000"
}]
}
}, {
"MyDeposit": {
"MyDepositTop": {
"AccountName": "MyMainSavings",
"AccountNumber": "x726",
"Balance": "USD 8,600.00",
"Rate": "@4.5%"
},
"MyDepositBottom": [{
"MaturityValue": "Maturity Value",
"Value": "$4329"
}, {
"Term": "Term",
"Value": "$3456"
}, {
"MaturesOn": "Matures On",
"Value": "$5000"
}]
}
}]
}
html 代码中有数据。本质上应该删除来自 html 文件的数据，并且只来自 json。我所说的数据是指出现在页面上的文本值。例如 abc - 不能这样，abc 应该来自 json。
所以MyMainSavings div对应json中的MyMainSavings对象，那么MyMainSavingsTop div对应json中的MyMainSavingsTop，所以我想通过javascript/jquery填充其对应元素div中的数据。总之，同名的元素应该在 html 文件中找到自己。
【问题讨论】：
标签： javascript jquery html css json