javascript读取xml实现javascript分页

前端技术 2023/09/05 JavaScript

复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/13905

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案