js加载json数据成表格
Posted 百变小超
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js加载json数据成表格相关的知识，希望对你有一定的参考价值。
根据json文件，读取并自动生成表格；
处理JSON的文件是将JSON串保存在js文件中，定义了一个变量名等于这个JSON串（数组）。
参考：
https://my.oschina.net/TOW/blog/734589
http://www.cnblogs.com/rainlam163/p/3259494.html
<html>
<head>
<title></title>
<style type="text/css">
table
{
padding: 0;
margin: 0;
border-collapse: collapse;
}
td
{
border: 1px solid #009999;
padding: 6px 6px 6px 12px;
color: #4f6b72;
text-align: center;
}
</style>
</head>
<body>
<hr/>
<h1>Tablespace statistic </h1>
<table id="table_tablespaces">
</table>
<hr/>
<h1>Database statistic </h1>
<table id="table_dbs">
</table>
</body>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="tablespaces_statistic.js" type="text/javascript"></script>
<script src="dbs_statistic.js" type="text/javascript"></script>
<script>
function get_contaion(name){
var html;
$.each(name, function (index, item) {
if (index === 0) {
html += "<tr>";
$.each(item, function (vlaIndex) {
html += "<td style=\'background:#C1DAD7\'>";
html += vlaIndex;
html += "</td>";
});
html += "</tr>";
}
html += "<tr>";
$.each(item, function (vlaIndex, valItem) {
html += "<td>";
html += valItem;
html += "</td>";
});
html += "</tr>";
});
return html;
}
$(function(){
$("#table_tablespaces").html(get_contaion(tablespaces_info));
$("#table_dbs").html(get_contaion(dbs_info));
});
</script>
</html>
以上是关于js加载json数据成表格的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript解析excel表格，转化成XML格式或者Json格式的数据。
Javascript vue.js表格分页，ajax异步加载数据