javascript讀取xml實(shí)現(xiàn)javascript分頁(yè)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讀取Xml并分頁(yè)</title>
</head>
<body >
<div id="gao">
</div>
<div>
<table align="center">
<tr>
<td><input type="button" name="prev" id="prev" value="上一頁(yè)" onclick="showPage('false')"><input type="button" id="next" name="next" value="下一頁(yè)" onclick="showPage('true')"> </td>
</tr>
</table>
</div>
<script type="text/javascript">
function LoadXML(url)
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc=new 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);
}else
{
alert("You browser cannot handle this script!");
}
return xmlDoc;
}
var xmlDoc=LoadXML("student.xml");
var students=xmlDoc.getElementsByTagName("student");
var stuLength=students.length;
var currentPage=0;
var pageSize=2;
var maxPage=Math.ceil(stuLength/pageSize);
function showPage(page)
{
var mytable=document.getElementsByTagName("table")[1];
if(mytable) document.body.removeChild(mytable);
var table=document.createElement("table");
table.setAttribute("id","mytable");
table.setAttribute("width","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("學(xué)校"));
headerrow.insertCell(2).appendChild(document.createTextNode("成績(jī)"))
if(page=="true")
currentPage++;
else
currentPage--;
if(currentPage>=maxPage) currentPage=maxPage;
else if(currentPage<=0) currentPage=1;
var start=(currentPage-1)*pageSize;
var end=currentPage*pageSize-1;
for(var i=start;i<=end;i++)
{
var e=students[i];
var name=e.getAttribute("name");
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("true");
</script>
</body>
</html>
在編寫(xiě)過(guò)程過(guò),涉及到代碼的處理上,由于我最初,將javascript代碼放在了head標(biāo)簽里面,結(jié)果導(dǎo)致document.body對(duì)象為空!
我們都知道,javascript在執(zhí)行的時(shí)候,頁(yè)面會(huì)暫定加載而去執(zhí)行html代碼,所以當(dāng)js代碼放在head標(biāo)簽中的時(shí)候,html頁(yè)面還沒(méi)有執(zhí)行到body,故而產(chǎn)生了錯(cuò)誤!
后來(lái)將js代碼,放在了body的尾部,這樣,就能夠正確引用到body對(duì)象了!
同時(shí),在大型網(wǎng)站架構(gòu)中,也是提高頁(yè)面加載速度的一種方式!頁(yè)面首頁(yè)加載html標(biāo)簽內(nèi)容,到頁(yè)面最后,在執(zhí)行js代碼,能在很大程度上提升網(wǎng)頁(yè)打開(kāi)速度,提升用戶(hù)體驗(yàn)!
另外的student.xml內(nèi)容是
<?xml version="1.0" encoding="utf-8"?>
<students>
<student name="gaoxing">
<school>西北大學(xué)1</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)2</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大3學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)4</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大5學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大6學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大7學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北8大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北9大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北10大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)</school>
<grade>76</grade>
</student>
<student name="gaoxing">
<school>西北大學(xué)</school>
<grade>76</grade>
</student>
</students>
- JavaScript操作XML/HTML比較常用的對(duì)象屬性集錦
- JavaScript操作XML文件之XML讀取方法
- JavaScript實(shí)現(xiàn)將xml轉(zhuǎn)換成html table表格的方法
- JavaScript將XML轉(zhuǎn)成JSON的方法
- Javascript 讀取操作Sql中的Xml字段
- 用javascript讀取xml文件讀取節(jié)點(diǎn)數(shù)據(jù)
- javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
- javascript創(chuàng)建createXmlHttpRequest對(duì)象示例代碼
- 如何使用Javascript正則表達(dá)式來(lái)格式化XML內(nèi)容
- javascript+xml實(shí)現(xiàn)簡(jiǎn)單圖片輪換(只支持IE)
- javascript實(shí)現(xiàn)加載xml文件的方法
相關(guān)文章
深入理解Javascript中的valueOf與toString
javascript中所有數(shù)據(jù)類(lèi)型都擁有valueOf和toString這兩個(gè)方法,null除外。它們倆解決javascript值運(yùn)算與顯示的問(wèn)題,本文將詳細(xì)介紹,有需要的朋友可以參考下2017-01-01JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法
這篇文章主要介紹了JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法,詳細(xì)分析了eval函數(shù)的功能及使用eval函數(shù)實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建變量的步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
這里我要分享一個(gè)自己修改的顏色選擇器,有需要的朋友參考下2012-11-11基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析
這篇文章主要介紹了JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07