qianbao

文采有限,写不出系统的文章....所以只能记录一些小小的知识点
没有真正的捷径能绕过黑暗直达黎明..

javascript加载xml到表格内,并实现排序,分页,列拖动,筛选数据等

静态文件代码:

<!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>&nbsp;&nbsp;</td>
                    
<td>&nbsp;&nbsp;</td>
                    
<td>联系电话</td>
                    
<td>&nbsp;&nbsp;</td>
                    
<td>&nbsp;&nbsp;</td>
                
</tr>
            
</table>
            
<div class="ot">
                每页
<span class="sp" id="pagesize"></span>条记录&nbsp;&nbsp;
                共
<span class="sp" id="dataCount"></span>条记录&nbsp;&nbsp;
                
<input id="first" class="btn" type="button" value="首页" onclick="firstPage();"/>&nbsp;
                
<input id="previous" class="btn" type="button" value="上一页" onclick="previousPage();"/>&nbsp;
                
<input id="next" type="button" class="btn" value="下一页" onclick="nextPage();"/>&nbsp;
                
<input id="last" class="btn" type="button" value="尾页" onclick="lastPage();"/>&nbsp;&nbsp;
                
<input id="goto" type="text" size="5"/>
                
<input id="btgoto" class="btn" type="button" value="转到" onclick="gotoPagebef();"/>
                当前第
<span id="currentpage" class="sp"></span>&nbsp;&nbsp;
                共
<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