读取XML数据对象，并以班级分组的方式将各年级的同学信息显示在页面中。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title> <script type="text/javascript" src="Jscript/jquery-1.4.2.min.js">script> <style type="text/css"> body{font-size:13px} .iframe{width:320px;border:solid 1px #666} .iframe .title{padding:5px;background-color:#eee;} .iframe .content{padding:8px; font-size:12px;} .btn {border:#666 1px solid;padding:2px;width:80px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} style> <script type="text/javascript"> var arrGrade = new Array(980886, 980666);
$(function () { $("#Button1").click(function () { var strHTML = "";
$.ajax({
url: '7-6.xml',
dataType: 'xml',
success: function (data) { $.each(arrGrade, function (i) { var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");
strHTML += "
年级：" + arrGrade[i] + "
";
$strUser.each(function () { strHTML += "姓名：" + $(this).children("name").text() + "
";
strHTML += "性别：" + $(this).children("sex").text() + "
";
strHTML += "邮箱：" + $(this).children("email").text() + "
";
});
});
$("#Tip").html(strHTML);
}
});
});
}); script> head> <body> <div class="iframe"> <div class="title"> <input id="Button1" type="button" class="btn" value="获取数据" /> div> <div class="content"> <div id="Tip">div> div> div> body> html>
XML:
<Info> <User grade="980886"> <name>龚德辉name> <sex>男sex> <email>gongdehui@163.comemail> User> <User grade="980886"> <name>李建洲name> <sex>女sex> <email>xiaoli@163.comemail> User> <User grade="980666"> <name>张天虎name> <sex>男sex> <email>zhantianhu@163.comemail> User> <User grade="980666"> <name>陈小燕name> <sex>女sex> <email>chenxiaoyan@163.comemail> User> Info>
