javascript读取xml实现javascript分页

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>读取Xml并分页</title>

　　</head>

　　<body >

　　</div>

　　<div>

　　<tr>

　　</tr>

　　</table>

　　</div>

　　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("学校"));

　　headerrow.insertCell(2).appendChild(document.createTextNode("成绩"))

　　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>

　　在编写过程过，涉及到代码的处理上，由于我最初，将javascript代码放在了head标签里面，结果导致document.body对象为空！

　　我们都知道，javascript在执行的时候，页面会暂定加载而去执行html代码，所以当js代码放在head标签中的时候，html页面还没有执行到body，故而产生了错误！

　　后来将js代码，放在了body的尾部，这样，就能够正确引用到body对象了！

　　同时，在大型网站架构中，也是提高页面加载速度的一种方式！页面首页加载html标签内容，到页面最后，在执行js代码，能在很大程度上提升网页打开速度，提升用户体验！

　　另外的student.xml内容是

复制代码代码如下:

　　<?xml version="1.0" encoding="utf-8"?>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</student>

　　</students>

教程首页更多教程