Javascript liest XML, um Javascript-Paging zu implementieren

Autor：Eve Cole Aktualisierungszeit：2025-01-18 20:48:02

复制代码代码如下:

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

<Kopf>

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

</head>

<Körper >

</div>

<div>

<tr>

</tr>

</table>

</div>

Funktion 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);

}anders

{

warning("Ihr Browser kann dieses Skript nicht verarbeiten!");

}

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);

Funktion showPage(Seite)

{

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")

aktuelleSeite++;

anders

aktuelleSeite--;

if(currentPage>=maxPage) currentPage=maxPage;

sonst 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代码, 能在很大程度上提升网页打开速度, 提升用户体验！

Laden Sie die Datei student.xml herunter

复制代码代码如下:

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

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</student>

</students>