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
テキスト読み込み
製品名 | 価格 |
---|