JSON

javascript

[javascript]
<script type="text/javascript">
window.addEventListener('load',
function(event){
var elem = document.getElementById('btn_load');
elem.addEventListener('click',loadJSON,false);
},false);
function loadJSON(){
var req = new XMLHttpRequest();
req.open('GET','prod_data.json');
req.onreadystatechange = function(event){
if(req.readyState == 4){
var div = document.getElementById('div_source');
if(req.status == 200){
div.innerHTML = req.responseText;
createTable(req.responseText); }
} else{
div.innerHTML = '読み込みエラー';
}
};
req.send();
};
function createTable(jsontxt){
var prod_data = eval('(' + jsontxt + ')');
var table = document.getElementById('prod_table');
var tbody = document.getElementsByTagName('tbody')[0];
for(var i = 0; i<prod_data.length; i++){
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = prod_data[i].name;
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML = prod_data[i].price;
tr.appendChild(td);
tbody.appendChild(tr);
}
}
</script>

[/javascript]

html

[html]
<div id="wrapper">
<h1>テキスト読み込み</h1>
<input type="button" id="btn_load" value="読み込み"></button>
<div id="div_source"></div>
<table id="prod_table">
<tbody>
<thead>
<tr>
<th>製品名</th>
<th>価格</th>
</tr>
</thead>
</tbody>
</table>
</div>
[/html]