我们需要一些指导,[我们才刚开始编程],并且已经查看了很多示例,但是无法将我们的JSON导入表格中。
目前,我们的表格数据是内联的,但现在有一个正确格式的JSON文件可用,并且会自动更新,我们希望在页面加载时即时将其加载到表格中。
这是我们目前使用的示例:
有更多的数据行,表格有CSS样式,并将sortTable(n)函数应用于标题。它完美地显示,看起来和我们想要的一样。
我们已经谷歌了[很多]并尝试了各种加载/填充脚本,并试图让w3schools上的示例工作 - https://www.w3schools.com/js/js_json_html.asp - 不幸的是,我们对此还相当陌生。
我们的JSON文件/assets/sample.JSON格式正确且符合要求。
如何简单导入JSON以填充id="gable"的表格?
目前,我们的表格数据是内联的,但现在有一个正确格式的JSON文件可用,并且会自动更新,我们希望在页面加载时即时将其加载到表格中。
这是我们目前使用的示例:
<div>
<p> *** OTHER STUFF HERE ***<p/>
<table id="gable">
<colgroup>
<col class="twenty" />
<col class="fourty" />
<col class="thirtyfive" />
<col class="twentyfive" />
</colgroup>
<tr>
<th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>  COUNTRY</th>
<th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>  LOCATION</th>
<th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>  BALANCE</th>
<th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>  DATE</th>
</tr>
</table>
</div>
<script>
var data = [
{ "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
{ "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
{ "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
{ "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
{ "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
];
var table = document.getElementById('gable');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
'<td>' + object.LoC + '</td>' +
'<td>' + object.BALANCE + '</td>' +
'<td>' + object.DATE + '</td>';
table.appendChild(tr);
});
</script>
有更多的数据行,表格有CSS样式,并将sortTable(n)函数应用于标题。它完美地显示,看起来和我们想要的一样。
我们已经谷歌了[很多]并尝试了各种加载/填充脚本,并试图让w3schools上的示例工作 - https://www.w3schools.com/js/js_json_html.asp - 不幸的是,我们对此还相当陌生。
我们的JSON文件/assets/sample.JSON格式正确且符合要求。
如何简单导入JSON以填充id="gable"的表格?