文本主要介绍JavaScript 读取XMl 文件中的数据,并以一定的方式显示出来。本文为分页显示。分页代码有JavaScript代码实现。
XML中的数据(名字为Records.xml):
<?xml version="1.0"?> <ArrayOfRecord xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <Record> <SpentTime>2011-07-14T13:28:21</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,李琦,刘漱琰,万永刚</Share> <Money>8.5</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-14T13:28:21</SpentTime> <Provider>李琦</Provider> <Share>王文赛,李琦,刘漱琰,万永刚</Share> <Money>231.38</Money> <Description>电费</Description> </Record> <Record> <SpentTime>2011-07-14T13:28:21</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,李琦,刘漱琰,万永刚</Share> <Money>50</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-14T13:28:21</SpentTime> <Provider>刘漱琰</Provider> <Share>王文赛,李琦,刘漱琰,万永刚</Share> <Money>15</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-17T13:28:21</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,李琦,刘漱琰,万永刚</Share> <Money>9</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-19T13:37:56</SpentTime> <Provider>刘漱琰</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>34.5</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-19T13:37:56</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>29.6</Money> <Description>面条</Description> </Record> <Record> <SpentTime>2011-07-19T13:37:56</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>6</Money> <Description>面条</Description> </Record> <Record> <SpentTime>2011-07-19T13:37:56</SpentTime> <Provider>李琦</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>58.8</Money> <Description>水费</Description> </Record> <Record> <SpentTime>2011-07-20T13:37:56</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>6</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-21T13:37:56</SpentTime> <Provider>李琦</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>46.7</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-21T13:37:56</SpentTime> <Provider>刘漱琰</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>5</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-23T13:37:56</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>52.5</Money> <Description>买菜</Description> </Record> <Record> <SpentTime>2011-07-23T13:37:56</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>5</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-24T13:37:56</SpentTime> <Provider>李琦</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>6</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-24T13:37:56</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>5</Money> <Description>馒头</Description> </Record> <Record> <SpentTime>2011-07-25T13:37:56</SpentTime> <Provider>王文赛</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>110</Money> <Description>杂物</Description> </Record> <Record> <SpentTime>2011-07-25T13:37:56</SpentTime> <Provider>刘漱琰</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>61</Money> <Description>杂物</Description> </Record> <Record> <SpentTime>2011-07-27T17:54:18.078125+08:00</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>28.5</Money> <Description>杂物</Description> </Record> <Record> <SpentTime>2011-07-27T18:29:38.265625+08:00</SpentTime> <Provider>刘漱琰</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>21</Money> <Description>买鸡蛋</Description> </Record> <Record> <SpentTime>2011-07-28T08:17:49.734375+08:00</SpentTime> <Provider>万永刚</Provider> <Share>王文赛,万永刚,刘漱琰,李琦</Share> <Money>15.8</Money> <Description>面条</Description> </Record> </ArrayOfRecord>
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"> <!--定义显示的样式--> <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; } .borderstyle { font-family: sans-serif; text-align: center; background-color:Gray; width:800px; } .btn { margin-left: 30px; margin-right: 30px; } label { font-size: 20px; font-family: sans-serif; } </style> <script type = "text/javascript" > var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("Records.xml"); //加载Records.xml文档,前提该文档与该html页面在同一个文件夹下面 Records = xmlDoc.getElementsByTagName("Record"); //获取xml文档中Record的记录的集合 var maxRec = Records.length;//Record的条数 var pageShow = 5;//每页显示的数据的条数 var currentPage = 1;//当前页码数 var maxpPage = Math.ceil(maxRec/pageShow); //在窗体加载中调用,第一个版本,本程序显示的第二个版本,即该函数可以参考,本程序没有用处 function addToTable() { var tr = ""; for(var i = 0 ;i<Records.length;i++) { tr = tr+ '<tr><td>'+ (i+1)+'</td>'+ '<td>'+ Records[i].getElementsByTagName("SpentTime")[0].firstChild.nodeValue+'</td>'+ '<td>'+ Records[i].getElementsByTagName("Provider")[0].firstChild.nodeValue+'</td>'+ '<td>'+ Records[i].getElementsByTagName("Share")[0].firstChild.nodeValue+'</td>'+ '<td>'+ Records[i].getElementsByTagName("Money")[0].firstChild.nodeValue+'元'+'</td>'+ '<td>'+ Records[i].getElementsByTagName("Description")[0].firstChild.nodeValue+'</td></tr>'; } table0.insertRow(table0.rows.length); table0.rows.item(table0.rows.length -1).insertCell(0); var xx=table0.rows.length -1 ; var sHTML;//用来保存欲生成的表格对象或其他类型对象的代码 var caption = '<tr><td>序号</td><td>消费时间</td><td>付款人</td><td>涉及人员</td><td>消费金额</td><td>描述信息</td></tr>' sHTML='<TABLE border="1" width="100%"> ' + caption +tr + '</TABLE>'; table0.rows.item(table0.rows.length-1).cells.item(0).innerHTML=sHTML; } var btnFirst = document.createElement("button"); var btnPre = document.createElement("button"); var btnNext = document.createElement("button"); var btnLast = document.createElement("button"); //第二个版本、 function retrieve() { var oDiv = document.createElement("div");//创建一个div标签 oDiv.id = "showhtml" ; oDiv.className = "bordertyle"; if(maxRec!=0)//如果记录数不是0,则进行动态添加分页显示的按钮和标签 { var oTable = generateTable (oDiv,(currentPage - 1)*pageShow ,currentPage*pageShow); var pageInfo = document.createElement("div"); var oLable = document.createElement("label"); oLable.innerHTML = "共"+maxRec+"条记录,当前第"; pageInfo.appendChild(oLable); var curLabel = document.createElement("label"); curLabel.innerHTMl = currentPage; curLabel.setAttribute("id","curLabel"); pageInfo.appendChild(curLabel); var oLabel3 = document.createElement("label"); oLabel3.innerHTML = "页,共"+maxpPage+"页"; pageInfo.appendChild(oLabel3); oDiv.appendChild(pageInfo); var buttonSet = document.createElement("button"); buttonSet.className = "borderstyle"; btnFirst.innerHTML = "首页"; btnFirst.id = "btnFirst"; btnFirst.className = "btn"; btnFirst.onclick = function(){ if(currentPage >1) { goToPage(1,oTable,curLabel); } }; buttonSet.appendChild(btnFirst); btnPre.innerHTML = "前一页"; btnPre.id = "btnPre"; btnPre.className = "btn"; btnPre.onclick = function(){ if(currentPage >1) { goToPage(currentPage -1 ,oTable,curLabel); } }; buttonSet.appendChild(btnPre); var tx = document.createElement("input"); tx.value = currentPage; tx.id = "tx"; tx.size = "2"; buttonSet.appendChild(tx); var btnGO = document.createElement("button"); btnGO.innerHTML = "GO"; btnGO.onclick = function(){ var txpage = parseInt(tx.value); goToPage(txpage,oTable,curLabel); }; buttonSet.appendChild(btnGO); btnNext.innerHTML = "后一页"; btnNext.id = "btnNext"; btnNext.className = "btn"; btnNext.onclick = function(){ if(currentPage< maxpPage) { goToPage(currentPage +1 ,oTable,curLabel); } }; buttonSet.appendChild(btnNext); btnLast.innerHTML = "末页"; btnLast.id = "btnNext"; btnLast.className = "btn"; btnLast.onclick = function(){ goToPage(maxpPage ,oTable,curLabel); }; buttonSet.appendChild(btnLast); oDiv.appendChild(buttonSet); } else { oDiv.innerHTML = "无记录"; } document.body.appendChild(oDiv); alterButton(); } //创建一个页面的表 function generateTable(oDiv,start,end) { var oTable = document.createElement("table"); generateTableHead(oTable); generateTalbeContent(oTable,start,end); oDiv.appendChild(oTable); return oTable; } //创建表头 function generateTableHead(oTable) { var oTr = oTable.insertRow(-1); var oTd = oTr.insertCell(-1); oTd.innerHTML = "序号"; var oTd2 = oTr.insertCell(-1); oTd2.innerHTML = "消费时间"; var oTd3 = oTr.insertCell(-1); oTd3.innerHTML = "付款人"; var oTd4 = oTr.insertCell(-1); oTd4.innerHTML = "涉及人员"; var oTd5 = oTr.insertCell(-1); oTd5.innerHTML = "消费金额"; var oTd6 = oTr.insertCell(-1); oTd6.innerHTML = "消费描述"; } //创建表的内容 function generateTalbeContent(oTalbe,start,end) { end = (end > maxRec)?maxRec:end; for(var i = start;i<end;i++) { var oTr = oTalbe.insertRow(-1);//ff中默认必须家参数,而ie默认参数为-1; var oTd = oTr.insertCell(-1); oTd.innerHTML = i+1; var oTd2 = oTr.insertCell(-1); var oSpentTime = Records[i].getElementsByTagName("SpentTime"); var str = oSpentTime[0].firstChild.nodeValue.toString(); str = str.substring(0, 19); oTd2.innerHTML = str.replace('T',' '); var oTd3 = oTr.insertCell(-1); var Provider = Records[i].getElementsByTagName("Provider"); oTd3.innerHTML = Provider[0].firstChild.nodeValue; var oTd4 = oTr.insertCell(-1); var Share = Records[i].getElementsByTagName("Share"); oTd4.innerHTML = Share[0].firstChild.nodeValue; var oTd5 = oTr.insertCell(-1); var Money = Records[i].getElementsByTagName("Money"); oTd5.innerHTML = Money[0].firstChild.nodeValue+"元"; var oTd6 = oTr.insertCell(-1); var Description = Records[i].getElementsByTagName("Description"); oTd6.innerHTML = Description[0].firstChild.nodeValue; } } function alterButton() { btnPre.disabled = (currentPage<=1)? true:false; btnNext.disabled = (currentPage>=maxpPage)? true:false; btnFirst.disabled = (currentPage==1)? true:false; btnLast.disabled = (currentPage==maxpPage)? true:false; } function removeTableContent(oTable) { if(oTable.rows.length >1) { for(var i = oTable.rows.length -1;i>=1;i--) { oTable.deleteRow(i); } } } function goToPage(page,oTable) { if(page<1) { window.alert("您输入的页数小于等于0,请输入一个0到"+maxpPage+"的整数"); return; } if(page>maxpPage) { window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxpPage+"的整数"); return ; } removeTableContent(oTable); currentPage = page; var start = (currentPage - 1)*pageShow; var end = currentPage*pageShow; tx.value = currentPage; curLabel.innerHTML = currentPage; generateTalbeContent(oTable,start,end); alterButton(); } </script> <title>消费详情</title> </head> <!--方法一不能分页--> <!--<body bgcolor="#FFFFFF"onLoad="addToTable()"> <h2 align ="center"> 消费信息详情</h2> <table id=table0 width="100%" border="1" cellpadding="0" cellspacing="0" align ="center"> </table> </body>--> <!--方法二 分页显示--> <body bgcolor="#FFFFFF"> <h2 align ="center"> 消费信息详情</h2> <table id=table0 width="100%" border="0" cellpadding="0" cellspacing="0" align ="center"> </table> <script type ="text/javascript"> retrieve(); </script> </body> </html>
显示效果: