欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript讀取xml實(shí)現(xiàn)javascript分頁(yè)

 更新時(shí)間:2013年12月13日 09:20:00   作者:  
這篇文章主要介紹了javascript讀取xml數(shù)據(jù)對(duì)其實(shí)現(xiàn)javascript分頁(yè)效果,大家參考使用吧

復(fù)制代碼 代碼如下:

<!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并分頁(yè)</title>

</head>

<body >
   <div id="gao">

   </div>
    <div>
       <table align="center">
          <tr>
             <td><input type="button" name="prev" id="prev" value="上一頁(yè)"  onclick="showPage('false')"><input type="button" id="next" name="next" value="下一頁(yè)" 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("學(xué)校"));
  headerrow.insertCell(2).appendChild(document.createTextNode("成績(jī)"))
       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>


在編寫(xiě)過(guò)程過(guò),涉及到代碼的處理上,由于我最初,將javascript代碼放在了head標(biāo)簽里面,結(jié)果導(dǎo)致document.body對(duì)象為空!
我們都知道,javascript在執(zhí)行的時(shí)候,頁(yè)面會(huì)暫定加載而去執(zhí)行html代碼,所以當(dāng)js代碼放在head標(biāo)簽中的時(shí)候,html頁(yè)面還沒(méi)有執(zhí)行到body,故而產(chǎn)生了錯(cuò)誤!
后來(lái)將js代碼,放在了body的尾部,這樣,就能夠正確引用到body對(duì)象了!
同時(shí),在大型網(wǎng)站架構(gòu)中,也是提高頁(yè)面加載速度的一種方式!頁(yè)面首頁(yè)加載html標(biāo)簽內(nèi)容,到頁(yè)面最后,在執(zhí)行js代碼,能在很大程度上提升網(wǎng)頁(yè)打開(kāi)速度,提升用戶(hù)體驗(yàn)!
另外的student.xml內(nèi)容是
復(fù)制代碼 代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<students>
   <student name="gaoxing">
       <school>西北大學(xué)1</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大學(xué)2</school>
    <grade>76</grade>
   </student>
   <student name="gaoxing">
       <school>西北大3學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大學(xué)4</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大5學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大6學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大7學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北8大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北9大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北10大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大學(xué)</school>
    <grade>76</grade>
   </student>
      <student name="gaoxing">
       <school>西北大學(xué)</school>
    <grade>76</grade>
   </student>
</students>

相關(guān)文章

  • 深入理解Javascript中的valueOf與toString

    深入理解Javascript中的valueOf與toString

    javascript中所有數(shù)據(jù)類(lèi)型都擁有valueOf和toString這兩個(gè)方法,null除外。它們倆解決javascript值運(yùn)算與顯示的問(wèn)題,本文將詳細(xì)介紹,有需要的朋友可以參考下
    2017-01-01
  • 文字垂直滾動(dòng)之javascript代碼

    文字垂直滾動(dòng)之javascript代碼

    這篇文章主要應(yīng)用javascript代碼實(shí)現(xiàn)文字垂直滾動(dòng)的效果,需要的朋友可以參考下
    2015-07-07
  • JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法

    JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法

    這篇文章主要介紹了JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法,詳細(xì)分析了eval函數(shù)的功能及使用eval函數(shù)實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建變量的步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-06-06
  • JS hashMap實(shí)例詳解

    JS hashMap實(shí)例詳解

    這篇文章主要介紹了JS hashMap實(shí)例詳解的相關(guān)資料,包括刪除鍵值、獲取鍵值的相關(guān)知識(shí),非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友一起看看吧
    2016-05-05
  • javascript 中關(guān)于array的常用方法詳解

    javascript 中關(guān)于array的常用方法詳解

    這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下
    2017-05-05
  • Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼

    Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼

    這里我要分享一個(gè)自己修改的顏色選擇器,有需要的朋友參考下
    2012-11-11
  • ES6新特性之變量和字符串用法示例

    ES6新特性之變量和字符串用法示例

    這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實(shí)例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2017-04-04
  • 基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選

    基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • JS中的事件委托實(shí)例淺析

    JS中的事件委托實(shí)例淺析

    這篇文章主要介紹了JS中的事件委托,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript事件委托的概念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2018-03-03
  • JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析

    JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析

    這篇文章主要介紹了JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07

最新評(píng)論