jquery xml 샘플(2015.06.18)

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery XML</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td>번호</td>
            <td>과정</td>
            <td>이름</td>
            <td>소속</td>
            <td>학년</td>
        </tr>
    </tbody>
</table>
<script>
    $.ajax({
        type: "GET",
        url: "list.xml",
        dataType: "XML",
        success: function(xml){
            $list = $(xml).find("student");
            var sno = 0;
            $list.each(function(){
                sno++;
                var classtitle = $(this).find("classtitle").text();
                var sname = $(this).find("sname").text();
                var school = $(this).find("school").text();
                var year = $(this).find("year").text();
                var tr = "<tr>";
                tr += "<td>" + sno + "</td>";
                tr += "<td>" + classtitle + "</td>";
                tr += "<td>" + sname + "</td>";
                tr += "<td>" + school + "</td>";
                tr += "<td>" + year + "</td>";
                tr += "</tr>";
                $("table > tbody").append( tr );
            });
        }
    });
    $("tr:first > td").css("background-color","gray");
    $(document).on("mouseover","tr:not(:first-child) > td",
        function(){
            $(this).parent("tr").children("td").css("background-color","yellow");
        }
    );
    $(document).on("mouseout","tr:not(:first-child) > td",
        function(){
            $(this).parent("tr").children("td").css("background-color","white");
        }
    );

    //과제
    //첫 번째 줄을 제외하고 아무 줄이나 클릭하면,
    //해당 줄의 학생 정보(번호, 과정, 이름, 소속, 학년)를 별도의 표로 만들어서 화면에 표시할 것.
</script>
</body>
</html>