静态文件代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript" src="main.js"></script>
<style>
.body
{
width:700px;
}
.tb
{
font-size: 13px;
width:700px;
}
td
{
text-align:center;
width:100px;
height:25px;
}
.ot
{
text-align:left;
padding:10px;
font-size: 13px;
}
.btn
{
height:18px;
}
.sp
{
color:red;
}
</style>
</HEAD>
<BODY>
<center class="body">
<div class="right">
<div id="oldcond" class="ot">选择条件
<select id="condition" name="condition" onchange="changecondition();">
<option value="p">--请选择--</option>
<option value="id">用户ID</option>
<option value="name">用户名</option>
<option value="age">年龄</option>
<option value="sex">性别</option>
<option value="tel">电话</option>
<option value="state">国家</option>
<option value="address">地址</option>
</select>
<select id="cis" name="cis">
<option value="1">等于</option>
</select>
</div>
<table id="tb" class="tb" bordercolor="#666666" border="1" cellPadding="0" cellSpacing="0">
<tr>
<td>用户ID</td>
<td>用户名</td>
<td>年 龄</td>
<td>性 别</td>
<td>联系电话</td>
<td>国 籍</td>
<td>地 址</td>
</tr>
</table>
<div class="ot">
每页<span class="sp" id="pagesize"></span>条记录
共<span class="sp" id="dataCount"></span>条记录
<input id="first" class="btn" type="button" value="首页" onclick="firstPage();"/>
<input id="previous" class="btn" type="button" value="上一页" onclick="previousPage();"/>
<input id="next" type="button" class="btn" value="下一页" onclick="nextPage();"/>
<input id="last" class="btn" type="button" value="尾页" onclick="lastPage();"/>
<input id="goto" type="text" size="5"/>
<input id="btgoto" class="btn" type="button" value="转到" onclick="gotoPagebef();"/>
当前第<span id="currentpage" class="sp"></span>页
共<span id="pagecount" class="sp"></span>页
</div>
</div>
</center>
<div id='dragdiv' style='width:80px;position:absolute;border:1px dashed black;text-align:center;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);.visibility:hidden' onmousedown='startDarg(this);' onmouseup='stopDrag(this);' onmousemove='drag(this);'></div>
</BODY>
</HTML>
数据文件代码(名为:person.xml)
<?xml version="1.0" encoding="utf-8" ?>
<root>
<person>
<id>1</id>
<name>张三</name>
<age>20</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>2</id>
<name>张a三</name>
<age>21</age>
<sex>女</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>3</id>
<name>张b三</name>
<age>22</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>4</id>
<name>张c三</name>
<age>22</age>
<sex>女</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>5</id>
<name>张daf三</name>
<age>22</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>6</id>
<name>张ae三</name>
<age>22</age>
<sex>女</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>7</id>
<name>张yt三</name>
<age>22</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>8</id>
<name>张u三</name>
<age>22</age>
<sex>女</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>9</id>
<name>张wr三</name>
<age>22</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>10</id>
<name>张nt三</name>
<age>22</age>
<sex>男</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>11</id>
<name>张jjg三</name>
<age>22</age>
<sex>女</sex>
<tel>13236252525</tel>
<state>中国</state>
<address>江苏南京</address>
</person>
<person>
<id>12</id>
<name>李四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>13</id>
<name>李th四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>14</id>
<name>李ng四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>15</id>
<name>李md四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>16</id>
<name>李mt四</name>
<age>25</age>
<sex>女</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>17</id>
<name>李dfg四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>18</id>
<name>李wer四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>19</id>
<name>李khf四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person> <person>
<id>20</id>
<name>李asd四</name>
<age>25</age>
<sex>女</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>21</id>
<name>李asd四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>22</id>
<name>李dfe四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>23</id>
<name>李fe四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>24</id>
<name>李vvve四</name>
<age>25</age>
<sex>男</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
<person>
<id>25</id>
<name>李v四</name>
<age>25</age>
<sex>女</sex>
<tel>13222252525</tel>
<state>美国</state>
<address>江苏南京</address>
</person>
</root>
下面是main.js
var pageSize=5; //每页显示多少条数据
var pageCount=0; //总页数
var currentPage=0; //当前页数
var dataCount=0; //记录总数
var xmlData=[]; //暂时存放xml的数据
var cellIndex=-1; //当前排序的列的索引
var xmlRoot; //xml根节点
var tdinlist=[]; //原有表格列头名
var conditioninner; //条件DIV原有innerHTML
var $=function(id)
{
return document.getElementById(id);
}
var trim = function(str)
{
return str.replace(/^\s+|\s+$/g,"");
}
window.onload=function()
{
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = false;
doc.load("person.xml");
var root