JSON

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);
                }
            }
        &lt;/script&gt;</p>

<p>

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>

(Visited 1 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。