Sample is best!
Sample is best!
開発環境 メモ帳
実行環境 Internet Explorer 11

JsonTable.html 
<html>
<head>
<title>JsonTable</title>
<script src="planet.js"></script>
<script type="text/javascript">
<!--
function create()
{
	var d1 = document.getElementById("d1");
	for (var i = d1.childNodes.length - 1; 0 <= i; i--) {
		d1.removeChild(d1.childNodes[i]);
	}
 
	var table = document.createElement("table");
	table.border = 1;
	table.cellSpacing = 0;
	table.cellPadding = 3;
	table.style.setAttribute("border-collapse", "collapse");
 
	var planet = data.planet;
 
	// head
	{
		var thead = table.createTHead();
		var row = thead.insertRow();
		row.bgColor = "KHAKI";
 
		var record = planet[0];
		for (var key in record) {
			var cell = row.insertCell();
			var text = document.createTextNode(key);
			cell.appendChild(text);
		}
	}
 
	// body
	for (var r in planet) {
		var row = table.insertRow();
		row.bgColor = (r & 1) ? "OLDLACE" : "WHITE";
 
		var record = planet[r];
		for (var key in record) {
			var cell = row.insertCell();
			var text = document.createTextNode(record[key]);
			cell.appendChild(text);
		}
	}
 
	d1.appendChild(table);
}
// -->
</script>
</head>
 
<body>
<button onclick="create()">↓</button><br>
<br>
<div id="d1"></div>
</body>
</html>
 

planet.js 
data={"planet":[
{"id":1, "name":"水星", "radius":0.31, "period":0.24},
{"id":2, "name":"金星", "radius":0.72, "period":0.62},
{"id":3, "name":"地球", "radius":1.00, "period":1.00},
{"id":4, "name":"火星", "radius":1.52, "period":1.88},
]}
 
「JsonTable」をウィキ内検索
最終更新：2014年05月12日 20:09