文本主要介绍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>
显示效果: