用js解析xml，实现分页和单一查询
2010-12-16 20:48
453 查看
帮别人做的，正好学习一下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:;' onclick=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>
############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:;' onclick=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 使用JS+XML（数据岛）实现分页）
- JS解析XML的实现代码
- Node.js、express、mongodb 实现分页查询、条件搜索
- Dom4j递归解析XML实现JS的getElementsByName类似方法
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- Vue.js实现分页查询功能
- js读取xml文档，并实现简单分页
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- JS实现兼容各浏览器解析XML文档数据的方法
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
- 通过fetchXml 实现分页查询
- 用js解析xml实现省市二级联动
- 根据ajax发送数据，从servelt中读取xml数据并显示，实现查询、删除和分页
- js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
- JS+DOM+XML实现分页功能
- JS解析XML的实现代码
- js技术实现html页面解析xml文档的级联下拉列表操作
- js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)