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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
同域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
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python多线程用法实例详解
2015/01/15 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
如何学习Python time模块
2020/06/03 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
水电工岗位职责
2014/02/12 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
选秀节目策划方案
2014/06/06 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
文明家庭事迹材料
2014/12/20 职场文书
单位租车协议书
2015/01/29 职场文书
python热力图实现的完整实例
2022/06/25 Python