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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
VueJS全面解析
Nov 10 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
vue 取出v-for循环中的index值实例
Nov 09 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
ASP知识讲座四
2006/10/09 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JavaScript 常用函数
2009/12/30 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
深入理解Python 多线程
2020/06/16 Python
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
销售经理工作职责范文
2013/12/03 职场文书
房地产活动策划方案
2014/05/14 职场文书
校园环保标语
2014/06/13 职场文书
卫生标语大全
2014/06/21 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
基层党员对照检查材料
2014/08/25 职场文书
迁户口计划生育证明
2014/10/19 职场文书
运动会宣传语
2015/07/13 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android