javascript lê xml para implementar paginação javascript

Autor：Eve Cole Data da Última Atualização：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">

<cabeça>

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

</head>

<corpo>

</div>

<div>

<tr>

</tr>

</tabela>

</div>

função LoadXML(url)

{

var xmlDoc;

if(janela.ActiveXObject)

{

xmlDoc=novo ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async="falso";

xmlDoc.load(url);

}else if(document.implementation&&document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.async=false;

xmlDoc.load(url);

}outro

{

alert("Seu navegador não consegue lidar com este script!");

}

retornar xmlDoc;

}

var xmlDoc=LoadXML("aluno.xml");

var estudantes=xmlDoc.getElementsByTagName("aluno");

var stuLength=alunos.comprimento;

var páginaatual=0;

var pageSize=2;

var maxPage=Math.ceil(stuLength/pageSize);

função mostrarPágina(página)

{

var minhatabela=document.getElementsByTagName("tabela")[1];

if(minhatabela) document.body.removeChild(minhatabela);

var tabela=document.createElement("tabela");

table.setAttribute("id","minhatabela");

table.setAttribute("largura","600");

table.setAttribute("borda","1");

document.body.appendChild(tabela);

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(página=="verdadeiro")

página atual++;

outro

página atual--;

if(PáginaAtual>=PáginaMax) PáginaAtual=PáginaMax;

senão if(PáginaAtual<=0)PáginaAtual=1;

var start=(currentPage-1)*pageSize;

var end=PáginaAtual*pageSize-1;

for(var i=início;i<=fim;i++)

{

var e=alunos[i];

var nome=e.getAttribute("nome");

var escola=e.getElementsByTagName("escola")[0].firstChild.data;

var nota=e.getElementsByTagName("nota")[0].firstChild.data;

var linha=tabela.insertRow(i%pageSize+1);

row.insertCell(0).appendChild(document.createTextNode(nome));

row.insertCell(1).appendChild(document.createTextNode(escola));

row.insertCell(2).appendChild(document.createTextNode(escola));

}

showPage("verdadeiro");

</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"?>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</aluno>

</alunos>