jquery xml dialog(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>
<div id="dialog" title="학생정보">
    <p>과정 : <span id="classtitle"></span></p>
    <p>소속 : <span id="school"></span></p>
    <p>이름 : <span id="sname"></span></p>
    <p>학년 : <span id="year"></span></p>
</div>
<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");
        }
    );
    $("#dialog").hide();
    $(document).on("click","tr:not(:first-child) > td",             function(){
        var data = $(this).parent("tr").children("td");
        var classtitle = $(data[1]).html();
        var sname = $(data[2]).html();
        var school = $(data[3]).html();
        var year = $(data[4]).html();
        $("#classtitle").html(classtitle);
        $("#sname").html(sname);
        $("#school").html(school);
        $("#year").html(year);
        $("#dialog").dialog();
    });

</script>
</body>
</html>