用js解析xml，实现分页和单一查询

最新推荐文章于 2020-05-21 21:44:53 发布

mifanwater

最新推荐文章于 2020-05-21 21:44:53 发布

阅读量1k

点赞数

分类专栏： ajax/js 文章标签： xml function button javascript email table

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/mifanwater/article/details/6080894

版权

ajax/js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

帮别人做的，正好学习一下js，希望对过客有所帮助！

############friends.xml##########

<?xml version="1.0" encoding="UTF-8"?>
<friendsList>

    <friends id='1'>
        <name>张三</name>
        <id>001</id>
  <email>zhangsan@163.com</email>
  <phone>0312-123456</phone>
  <mobilePhone>13101091122</mobilePhone>
     <postCode>071000</postCode>
  <address>
      河北保定河北大学工商学院
  </address>
</friends >
     <friends id='2'>
        <name>李四</name>
        <id>002</id>
  <email>lisi@163.com</email>
  <phone>0312-123456</phone>
  <mobilePhone>123456789</mobilePhone>
  <postCode>071000</postCode>
  <address>
      河北保定河北农业大学
  </address>
</friends >
...

...

...

</friendsList>

############friends.html###########

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
table,tr,td {
background-position: center;
border-width: 2px;
border-style: solid;
border-collapse: collapse;
border-color: red;
text-align: center;
font-size: 15px;
}

table {
width: 900px;
margin-bottom: 20px;
}

tr {
height: 40px;
}

.bordertyle {
font-family: sans-serif;
text-align: center;
}

.btn {
margin-left: 40px;
margin-right: 40px;
}

label {
font-size: 20px;
font-family: sans-serif;
}
</style>

<script language="javascript">
//创建xmlDoc对象
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
//加载friends.xml
xmlDoc.load("friends.xml")
//获取friends元素
var friends = xmlDoc.getElementsByTagName("friends");
//得到记录的行数
var maxRes = friends.length;
var oTable = document.createElement("table");
//每页显示多少行
var pageShow = 4;
//当前页
var currentPage = 1;

//一共多少页
var maxPage = Math.ceil(maxRes / pageShow);

//此方法只能在body标签中或后调用
function retrieve() {

  var oDiv = document.createElement("div");
  oDiv.setAttribute("id", "showhtml");
  oDiv.className = "bordertyle";
  if (maxRes) {
   var oTable = generateTable(oDiv, (currentPage - 1) * pageShow,
     currentPage * pageShow);

   var pageInf = document.createElement("div");

   var oLabel = document.createElement("label");
   oLabel.innerHTML = "共" + maxRes + "条记录,当前第";
   pageInf.appendChild(oLabel);

   var curLabel = document.createElement("label");
   curLabel.innerHTML = currentPage;
   curLabel.setAttribute("id", "curLabel");
   pageInf.appendChild(curLabel);

   var oLabel3 = document.createElement("label");
   oLabel3.innerHTML = "页,共" + maxPage + "页";
   pageInf.appendChild(oLabel3);

   oDiv.appendChild(pageInf);

   var buttonSet = document.createElement("div")
   buttonSet.className = "bordertyle";

   var firstBtn = document.createElement("button");
   firstBtn.innerHTML = "首页";
   firstBtn.id = "firstBtn";
   firstBtn.className = "btn";
   firstBtn.onclick = function() {
    goToPage(1, oTable, curLabel);
   };
   buttonSet.appendChild(firstBtn);

   var preBtn = document.createElement("button");
   preBtn.id = "preBtn";
   preBtn.innerHTML = "前一页";
   preBtn.className = "btn";
   preBtn.onclick = function() {
    if (currentPage > 1) {
     goToPage(currentPage - 1, oTable, curLabel);
    }
   };
   buttonSet.appendChild(preBtn);

   var tx = document.createElement("input");
   tx.value = currentPage;
   tx.id = "tx";
   tx.size = "2";
   buttonSet.appendChild(tx);
   var goBtn = document.createElement("button");
   goBtn.innerHTML = "GO";
   goBtn.onclick = function() {
    var txPage = parseInt(tx.value);
    goToPage(txPage, oTable, curLabel);
   }
   buttonSet.appendChild(goBtn);

   var nextBtn = document.createElement("button");
   nextBtn.innerHTML = "下一页";
   nextBtn.id = "nextBtn";
   nextBtn.className = "btn";
   nextBtn.onclick = function() {
    if (currentPage < maxPage) {
     goToPage(currentPage + 1, oTable, curLabel);
    }
   };
   buttonSet.appendChild(nextBtn);

   var lastBtn = document.createElement("button");
   lastBtn.innerHTML = "末页";
   lastBtn.id = "lastBtn";
   lastBtn.className = "btn";
   lastBtn.onclick = function() {
    goToPage(maxPage, oTable, curLabel);
   };
   buttonSet.appendChild(lastBtn);

   oDiv.appendChild(buttonSet);
  } else {
   oDiv.innerHTML = "无记录";
  }
  document.body.appendChild(oDiv);
  alterButton();//先把oDiv加到body之后才可调用，害我犯了错误
}

//创建table
function generateTable(oDiv, start, end) {

  generateTableHead(oTable);
  generateTableContent(oTable, start, end);
  oDiv.appendChild(oTable);
  return oTable;
}

  //创建表格头部格式
function generateTableHead(oTable) {
  var oTr = oTable.insertRow();

  var oTd = oTr.insertCell();
  oTd.innerText = "id";

  var oTd1 = oTr.insertCell();
  oTd1.innerText = "name";

  var oTd2 = oTr.insertCell();
  oTd2.innerText = "email";

  var oTd3 = oTr.insertCell();
  oTd3.innerText = "phone";

  var oTd4 = oTr.insertCell();
  oTd4.innerText = "mobilePhone";

  var oTd5 = oTr.insertCell();
  oTd5.innerText = "postCode";

  var oTd6 = oTr.insertCell();
  oTd6.innerText = "address";
}
  var oTd ;
//创建表格内容
function generateTableContent(oTable, start, end) {

  end = (end > maxRes) ? maxRes : end;
  for ( var i = start; i < end; i++) {
   var oTr = oTable.insertRow();
   oTr.id = friends[i].getAttribute("id");

            oTd= oTr.insertCell();
   str="<a href='javascript:;' οnclick=goToLine(this.innerHTML);>"+friends[i].getAttribute("id");+"</a>";
   oTd.innerHTML=str;

   var oTd1 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("name");
   oTd1.innerText = oName[0].text;

   var oTd2 = oTr.insertCell();
   var oLoginName = friends[i].getElementsByTagName("email");
   oTd2.innerText = oLoginName[0].text;

   var oTd3 = oTr.insertCell();
   var oEmail = friends[i].getElementsByTagName("phone");
   oTd3.innerText = oEmail[0].text;

   var oTd4 = oTr.insertCell();
   var oEmail = friends[i].getElementsByTagName("mobilePhone");
   oTd4.innerText = oEmail[0].text;

   var oTd5 = oTr.insertCell();
   var oEmail = friends[i].getElementsByTagName("postCode");
   oTd5.innerText = oEmail[0].text;

   var oTd6 = oTr.insertCell();
   var oEmail = friends[i].getElementsByTagName("address");
   oTd6.innerText = oEmail[0].text;
  }
}
//删除当前页
function removeTableContent(oTable) {
  if (oTable.rows.length > 1) {
   for ( var i = oTable.rows.length - 1; i >= 1; i--) {
    oTable.deleteRow(i);
   }
  }
}

//改变按钮状态
function alterButton() {
  preBtn.disabled = (currentPage <= 1) ? true : false;
  nextBtn.disabled = (currentPage >= maxPage) ? true : false;
  firstBtn.disabled = (currentPage == 1) ? true : false;
  lastBtn.disabled = (currentPage == maxPage) ? true : false;
}

//跳转到指定页
function goToPage(page, oTable) {
  removeTableContent(oTable);
  currentPage = page;
  var start = (currentPage - 1) * pageShow;
  var end = currentPage * pageShow;
  tx.value = currentPage;
  curLabel.innerHTML = currentPage;
  generateTableContent(oTable, start, end);
  alterButton();
}
//跳转到指定行
function goToLine(id1){

for(i=0;i<=friends.length;i++){

  var id2=friends[i].getAttribute("id");

   if(id2==id1){
   removeTableContent(oTable);
   var oTr = oTable.insertRow();

    oTd= oTr.insertCell();
   var oName = friends[i].getElementsByTagName("id");
   oTd.innerText = id2;

            oTd1= oTr.insertCell();
   var oName = friends[i].getElementsByTagName("name");
   oTd1.innerText = oName[0].text;

   var oTd2 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("email");
   oTd2.innerText = oName[0].text;

   var oTd3 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("phone");
   oTd3.innerText =oName[0].text;

   var oTd4 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("mobilePhone");
   oTd4.innerText = oName[0].text;

   var oTd5 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("postCode");
   oTd5.innerText = oName[0].text;

   var oTd6 = oTr.insertCell();
   var oName = friends[i].getElementsByTagName("address");
   oTd6.innerText = oName[0].text;

   }
  }
}
</script>

</HEAD>
<BODY>
<center><h1>通讯录</h1></center>
  <script type="text/javascript">
retrieve();
</script>
</BODY>
</HTML>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js解析xml，实现分页和单一查询

帮别人做的，正好学习一下js，希望对过客有所帮助！############friends.xml##########张三001zhangsan@163.com0312-12345613101091122071000 河北保定河北大学工商学院
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。