<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <mce:style type="text/css"><!-- table,tr,td { background-position: center; border-width: 1px; border-style: solid; border-collapse: collapse; border-color: blue; text-align: center; font-size: 20px; } table { width: 800px; margin-bottom: 20px; } tr { height: 40px; } .bordertyle { font-family: sans-serif; text-align: center; } .btn { margin-left: 30px; margin-right: 30px; } label { font-size: 20px; font-family: sans-serif; } --></mce:style><style type="text/css" mce_bogus="1"> table,tr,td { background-position: center; border-width: 1px; border-style: solid; border-collapse: collapse; border-color: blue; text-align: center; font-size: 20px; } table { width: 800px; margin-bottom: 20px; } tr { height: 40px; } .bordertyle { font-family: sans-serif; text-align: center; } .btn { margin-left: 30px; margin-right: 30px; } label { font-size: 20px; font-family: sans-serif; } </style> <mce:script language="javascript"><!-- //***********js操作XML************* //* author:luobin * //* Email:luobin23628@163.com * //********************************* /* function loadXML(xmlFile){ var xmlDoc; if(!window.ActiveXObject){ var parser = new DOMParser(); xmlDoc = parser.parseFromString(xmlFile,"text/xml"); }else{ xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.load(xmlFile); } return xmlDoc; } */ //针对两种浏览器,分别获取xmlDocument对象 function loadXML(xmlFile) { var xmlDoc; if(window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load(xmlFile); } else if(document.implementation&&document.implementation.createDocument){ xmlDoc=document.implementation.createDocument( "", "",null); xmlDoc.async=false; xmlDoc.load(xmlFile); } else{ alert('Your browser cannot handle this script'); } return xmlDoc; } var xmlDoc = loadXML("test.xml"); var members = xmlDoc.getElementsByTagName("member"); var maxRes = members.length; var pageShow = 5; var currentPage = 1; var maxPage = Math.ceil(maxRes/pageShow); //此方法只能在body标签中或后调用 function retrieve(){ var oDiv = document.createElement("div"); oDiv.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之后才可调用,害我犯了错误 } function generateTable(oDiv,start,end){ var oTable = document.createElement("table"); generateTableHead(oTable); generateTableContent(oTable,start,end); oDiv.appendChild(oTable); return oTable; } function generateTableHead(oTable){ var oTr = oTable.insertRow(-1); var oTd = oTr.insertCell(-1); oTd.innerHTML = "name";//ie支持innerText,ff支持textContent 这里就偷懒的写法,改成innerHTML /** if(oTd.innerText){ oTd.innerText = "name"; }else{ oTd.textContent = "name"; } **/ var oTd2 = oTr.insertCell(-1); oTd2.innerHTML = "loginname"; var oTd3 = oTr.insertCell(-1); oTd3.innerHTML = "email"; } function generateTableContent(oTable,start,end){ end = (end>maxRes)?maxRes:end; for(var i=start;i<end;i++){ var oTr = oTable.insertRow(-1);//ff中insertRow必须加上参数,而ie默认为-1 oTr.id = members[i].getAttribute("id"); var oTd = oTr.insertCell(-1); var oName = members[i].getElementsByTagName("name"); oTd.innerHTML = oName[0].firstChild.nodeValue;//刚开始用的oName[0].text,不兼容ff,现在统一替换成oName[0].firstChild.nodeValue var oTd2 = oTr.insertCell(-1); var oLoginName = members[i].getElementsByTagName("loginName"); oTd2.innerHTML = oLoginName[0].firstChild.nodeValue; var oTd3 = oTr.insertCell(-1); var oEmail = members[i].getElementsByTagName("email"); oTd3.innerHTML = oEmail[0].firstChild.nodeValue; } } 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){ //此处还要加个正则表达式校验page是数字,js的正则表达式还不会有待进一步学习 if(page<1){ window.alert("您输入的页数小于等于0,请输入一个0到"+maxPage+"的整数"); return; } if(page>maxPage){ window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxPage+"的整数"); return; } removeTableContent(oTable); currentPage = page; var start = (currentPage-1)*pageShow; var end = currentPage*pageShow; tx.value = currentPage; curLabel.innerHTML = currentPage; generateTableContent(oTable,start,end); alterButton(); } // --></mce:script> <mce:script type="text/javascript"><!-- // --></mce:script> </HEAD> <BODY> <mce:script type="text/javascript"><!-- retrieve(); // --></mce:script> </BODY> </HTML> XML文件: <?xml version="1.0" encoding="GB2312"?> <rautinee> <member id='1'> <name>海仔</name> <loginName>rautinee</loginName> <email>rautinee@btamail.net.cn</email></member> <member id='2'> <name>刚强</name> <loginName>hehe</loginName> <email>rautinee@chinamanagers.com</email></member> <member id='3'> <name>金华刚</name> <loginName>nature_it</loginName> <email>rautinee_sea@hotmail.com</email></member> <member id='4'> <name>的简强</name> <loginName>tank</loginName> <email>tank@163.com</email></member> <member id='7'> <name>合资</name> <loginName>kaka</loginName> <email>kaka@eyou.com</email></member> <member id='6'> <name>加个人</name> <loginName>apple</loginName> <email>apple@163.com</email></member> <member id='8'> <name>null</name> <loginName>sunny</loginName> <email>rautinee@eyou.com</email></member> <member id='10'> <name>宝贝</name> <loginName>index</loginName> <email>rautinee@21cn.com</email></member> <member id='12'> <name>login</name> <loginName>login</loginName> <email>webmaster@chinamanagers.com</email></member> <member id='13'> <name>jiang</name> <loginName>123</loginName> <email>japing@chianmanagers.com</email></member> <member id='14'> <name>world</name> <loginName>world</loginName> <email>rautinee@21cn.com</email></member> <member id='15'> <name>swallow</name> <loginName>swallow</loginName> <email>swallow@chinamanagers.com</email></member> <member id='16'> <name>魏格</name> <loginName>hotmail</loginName> <email>rautinee_sea@hotmail.com</email></member> <member id='17'> <name>wrong</name> <loginName>wrong</loginName> <email>wrong@chinamanagers.com</email></member> <member id='18'> <name>leah</name> <loginName>leah</loginName> <email>leah@chinamanagers.com</email></member> <member id='19'> <name>ttth</name> <loginName>ttth</loginName> <email>rautinee@21cn.com</email></member> </rautinee>