复制代码代码如下 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>读取Xml并分页</title>
</tête>
<corps>
<div id="gao">
</div>
<div>
<table align="centre">
<tr>
<td><input type="bouton" name="prev" id="prev" value="上一页" onclick="showPage('false')"><input type="bouton" id="suivant" name="next" value="下一页" onclick="showPage('true')"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
fonction LoadXML(url)
{
var xmlDoc;
si (fenêtre.ActiveXObject)
{
xmlDoc=nouveau ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load(url);
}else if(document.implementation&&document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false ;
xmlDoc.load(url);
}autre
{
alert("Votre navigateur ne peut pas gérer ce script !");
}
retourner xmlDoc ;
}
var xmlDoc=LoadXML("étudiant.xml");
var étudiants=xmlDoc.getElementsByTagName("étudiant");
var stuLength=étudiants.longueur;
varPageActuelle=0;
var taillepage=2;
var maxPage=Math.ceil(stuLength/pageSize);
fonction showPage(page)
{
var matable=document.getElementsByTagName("table")[1];
if(matable) document.body.removeChild(matable);
var table=document.createElement("table");
table.setAttribute("id","matable");
table.setAttribute("largeur","600");
table.setAttribute("border","1");
document.body.appendChild(table);
var header=table.createTHead();
var headerrow=header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(1).appendChild(document.createTextNode("学校"));
headerrow.insertCell(2).appendChild(document.createTextNode("成绩"))
si(page=="true")
Page actuelle++ ;
autre
pageactuelle--;
if(currentPage>=maxPage) currentPage=maxPage;
sinon if(currentPage<=0) currentPage=1;
var start=(currentPage-1)*pageSize;
var end=currentPage*pageSize-1;
pour(var i=début;i<=fin;i++)
{
var e=étudiants[i];
var nom=e.getAttribute("nom");
var school=e.getElementsByTagName("school")[0].firstChild.data;
var grade=e.getElementsByTagName("grade")[0].firstChild.data;
var row=table.insertRow(i%pageSize+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(school));
row.insertCell(2).appendChild(document.createTextNode(school));
}
}
showPage("vrai");
</script>
</corps>
</html>
在编写过程过，涉及到代码的处理上，由于我最初，将javascript代码放在了head标签里面，结果导致document.body对象为空！
我们都知道，javascript在执行的时候，页面会暂定加载而去执行html代码，所以当js代码放在head标签中的时候，html页面还没有执行到body，故而产生了错误！
后来将js代码，放在了body的尾部，这样，就能够正确引用到body对象了！
同时，在大型网站架构中，也是提高页面加载速度的一种方式！页面首页加载html标签内容，到页面最后，在执行js代码，能在很大程度上提升网页打开速度，提升用户体验！
Fichierstudent.xml
复制代码代码如下 :
<?xml version="1.0" encoding="utf-8"?>
<étudiants>
<nom de l'étudiant="gaoxing">
<école>西北大学1</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学2</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大3学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学4</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大5学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大6学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大7学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北8大学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北9大学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>10ème année</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学</école>
<niveau>76</niveau>
</étudiant>
<nom de l'étudiant="gaoxing">
<école>西北大学</école>
<niveau>76</niveau>
</étudiant>
</étudiants>