javascript读取xml实现javascript分页


Posted in Javascript onDecember 13, 2013
<!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并分页</title>
</head>
<body >
   <div id="gao">
   </div>
    <div>
       <table align="center">
          <tr>
             <td><input type="button" name="prev" id="prev" value="上一页"  onclick="showPage('false')"><input type="button" id="next" name="next" value="下一页" 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("学校"));
  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"?>
<students>
   <student name="gaoxing">
       <school>西北大学1</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大学2</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大3学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学4</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大5学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大6学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大7学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北8大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北9大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北10大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大学</school>
    <grade>76</grade>
   </student>
</students>
Javascript 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 #Javascript
javascript分页代码实例分享(js分页)
Dec 13 #Javascript
jquery 操作iframe的几种方法总结
Dec 13 #Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python学习开发mock接口
2019/04/28 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
软件测试企业面试试卷
2016/07/13 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
测试工程师岗位职责
2013/11/28 职场文书
商场活动策划方案
2014/01/24 职场文书
中学生寄语大全
2014/04/03 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
小学记事作文之200字
2019/08/06 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android