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 浮动层菜单收藏
Jan 16 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
js实现简单掷骰子小游戏
Oct 24 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读写文件的方法(生成HTML)
2006/11/27 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
php日历制作代码分享
2014/01/20 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
javascript hashtable实现代码
2009/10/13 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
自学python的建议和周期预算
2019/01/30 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
python热力图实现简单方法
2021/01/29 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
卫生安全检查制度
2014/02/04 职场文书
师德师风个人反思
2014/04/28 职场文书
电力培训心得体会
2014/09/02 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
十二生肖观后感
2015/06/12 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技