javascript lee xml para implementar la paginación de javascript

Autor：Eve Cole Fecha de actualización：2025-01-18 20:48:02

复制代码代码如下:

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

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

</cabeza>

</div>

<div>

<tr>

</tr>

</tabla>

</div>

función CargarXML(url)

{

var xmlDoc;

si (ventana.ActiveXObject)

{

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

xmlDoc.async="falso";

xmlDoc.cargar(url);

}si no (documento.implementación&&documento.implementación.createDocumento)

{

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

xmlDoc.async=falso;

xmlDoc.cargar(url);

}demás

{

alert("¡Su navegador no puede manejar este script!");

}

devolver documentoxml;

}

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

var estudiantes=xmlDoc.getElementsByTagName("estudiante");

var stuLength=estudiantes.longitud;

var páginaactual=0;

var tamaño de página=2;

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

función mostrarPágina(página)

{

var mytable=document.getElementsByTagName("tabla")[1];

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

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

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

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

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

documento.body.appendChild(tabla);

var encabezado=table.createTHead();

var encabezadorow=encabezado.insertRow(0);

headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));

headerrow.insertCell(1).appendChild(document.createTextNode("学校"));

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

si(página=="verdadero")

páginaactual++;

demás

página actual--;

if(PáginaActual>=Páginamax) PáginaActual=Páginamax;

else if(PáginaActual<=0) PáginaActual=1;

var inicio=(páginaactual-1)*tamañodepágina;

var end=páginaactual*tamañodepágina-1;

para(var i=inicio;i<=fin;i++)

{

var e=estudiantes[i];

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

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

var calificación=e.getElementsByTagName("calificación")[0].firstChild.data;

var fila=table.insertRow(i%pageSize+1);

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

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

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

}

mostrarPágina("verdadero");

</script>

</cuerpo>

</html>

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

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

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

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

另外的student.xml内容是

复制代码代码如下:

<?xml versión="1.0" codificación="utf-8"?>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiante>

</estudiantes>