[JQuery] 02. getXml

02_getXml.html

<meta charset="utf-8" />
<script src="../lib/jquery.js"></script>
<script src="02_getXml.js"></script>
<style>
* {
    margin: 20px;
}

h2 {
    color: red;
}

#fruits_data tbody .head {
    font-size: 20px;
}
</style>

<div id="wrapper">
    <h2>각 영역에 맞는 값을 추가시켜 주세요.</h2>
    <table id="fruits_data" border="1" cellpadding="10" cellspacing="0">
        <tbody>
            <tr class="head">
                <td>과일이름</td>
                <td>가격</td>
                <td>유통기한</td>
                <td>원산지</td>
            </tr>
            <tr>
                <td>사과</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>딸기</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>귤</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>파인애플</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

 

02_getXml.js

$.get('data/data.xml', function(data){
    var fruits = $(data).find('data>fruits');
    var table = $('#fruits_data');
    fruits.each(function(i){
        var fruit = $(this);
        fruit.children().each(function(j){
            var text = $(this).text();
            var tr = table.find('tr').eq(i+1);
            var td = tr.find('> td').eq(j+1);
            td.text(text);
        });
    });
},'xml');

/*
$.get('data/data.xml', function(data){
    var fruits = $(data).find('data>fruits');
    var table = $('#fruits_data');
    fruits.each(function(i){
        var fruit = $(this);
        fruit.children().each(function(j){
        
        })
    })
});

*/

$.get('data/data.xml', function(data){
    var fruits = $(data).find('data>fruits');
    var table = $('#fruits_data');
    fruits.each(function(i){
        var fruit = $(this);
        fruit.children().each(function(j){
            var text = $(this).text();
            var tr = table.find('tr').eq(i+1);
            var td = tr.find('> td').eq(j+1);
            td.text(text);
        });
    });
},'xml');

/*
$.get('data/data.xml', function(data){
    var fruits = $(data).find('data>fruits');
    var table = $('#fruits_data');
    fruits.each(function(i){
        var fruit = $(this);
        fruit.children().each(function(j){
        
        })
    })
});

*/