상세 컨텐츠

본문 제목

xml형태의 데이터 불러와서 테이블에 넣거나 특정이벤트 발생시키기

Programming/javascript

by luckey 2011. 10. 3. 12:41

본문

    <script language="javascript" type="text/javascript">
        $(function () {
            var xmlData;
            $.ajaxSetup({ async: false }); //ajax 사용 동기화 시키기

            //데이터 불러오기
            $.ajax({
                type: "GET",
                dataType: "xml",
                url: "XML_LectureCollage.aspx",
                success: function (xml) {
                    xmlData = xml;

                    $('#lecList').find('.text').each(function () {
                        var cnt = $(xmlData).find("collage[lectureName='" + $(this).text() + "']").length;
                        if (cnt > 0) {
                            $(this).addClass('c06f');
                        }
                        $(this).next().text(cnt);
                    });

                },
                error: function (xmlHtpRequest, textStatus, errorThrown) {
                    alert("처리중 에러발생 [" + textStatus + "]");
                }
            });

            $('.text').click(function () {
                var strHtml;

                if ($(xmlData).length > 0) {
                    strHtml = "<ul>";
                    strHtml = "<li><strong>" + $(this).text() + "</strong></li>"
                    $(xmlData).find("collage[lectureName='" + $(this).text() + "']").each(function () {
                        strHtml += "<li>" + $(this).find("colName").text() + "</li>";
                    });
                    strHtml += "</ul>";

                    $('#collageList').html(strHtml);
                }
            });
        });
    </script>

<table id="lecList">
<tr>
    <th class="bg_1b"><p>구분</p></th>
    <th class="bg_1b">과목명</th>
    <th class="bg_1b">보유기관</th>
</tr>
<tr>
    <td  rowspan="10">필수과목</td>
    <td class="text">사회복지개론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">인간행동과사회환경</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지정책론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지법제</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지실천론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지실천기술론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지조사론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지행정론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">지역사회복지론</td>
    <td >0</td>
</tr>
<tr>
    <td class="text">사회복지현장실습</td>
    <td >0</td>
</tr>
</table>

결과화면


XML데이터 형식 [DB연동하여 XML형식 데이터 만들기 참고]

관련글 더보기

댓글 영역