複製程式碼如下:
<!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">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讀取Xml並分頁</title>
</頭>
<正文>
<div id="高">
</div>
<div>
<表對齊=“中心”>
<tr>
<td><input type="button" name="prev" id="prev" value="上一頁" onclick="showPage('false')"><input type="button" id="next" name="next" value="下一頁" onclick="showPage('true')"> </td>
</tr>
</表>
</div>
<腳本類型=“文字/javascript”>
函數 LoadXML(url)
{
var xmlDoc;
if(視窗.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=「假」;
xmlDoc.load(url);
}else if(document.implementation&&document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load(url);
}別的
{
Alert("您的瀏覽器無法處理此腳本!");
}
返回 xmlDoc;
}
var xmlDoc=LoadXML("student.xml");
var Students=xmlDoc.getElementsByTagName("學生");
var StuLength=students.length;
var 當前頁=0;
var pageSize=2;
var maxPage=Math.ceil(stuLength/pageSize);
函數showPage(頁面)
{
var mytable=document.getElementsByTagName("表")[1];
if(mytable) document.body.removeChild(mytable);
var table=document.createElement("表");
table.setAttribute("id","mytable");
table.setAttribute("寬度","600");
table.setAttribute("邊框","1");
document.body.appendChild(表);
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("成績"))
如果(頁==「真」)
當前頁++;
別的
目前頁--;
if(目前頁>=最大頁) 目前頁=最大頁;
否則 if(currentPage<=0) currentPage=1;
var start=(currentPage-1)*pageSize;
var end=目前頁*pageSize-1;
for(var i=開始;i<=結束;i++)
{
var e=學生[i];
var name=e.getAttribute("名稱");
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));
}
}
顯示頁面(“真”);
</腳本>
</正文>
</html>
在編寫過程中,涉及到程式碼的處理上,由於我一開始,將javascript程式碼放在了head標籤裡面,結果導致document.body物件為空!
我們都知道,javascript在執行的時候,頁面會暫定載入而執行html程式碼,所以當js程式碼去放在head標籤中的時候,html頁面還沒有執行到body,因此而產生了錯誤!
後來將js程式碼,放在了body的尾部,這樣,就能夠正確引用到body物件了!
同時,在大型網站架構中,也是提高頁面載入速度的一種方式! 頁面首頁載入html標籤內容,到頁面最後,在執行js程式碼,能夠在很大程度上提升網頁開啟速度,提升使用者體驗!
另外的student.xml內容是
複製程式碼如下:
<?xml 版本=“1.0”編碼=“utf-8”?>
<學生>
<學生姓名=“高星”>
<學校>西北大學1</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學2</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大三學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學4</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大五學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大六學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大七學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北第八大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北九大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北十大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學</學校>
<等級>76</等級>
</學生>
<學生姓名=“高星”>
<學校>西北大學</學校>
<等級>76</等級>
</學生>
</學生>