js解析xml

【Javascript】
下载
新闻
文章
js解析xml并分页效果

<html> 
<head> 
<title>XML文件内容分页 </title> 
<style type="text/css"> 
<!-- 
.STYLE1 { 
font-size: 13px; 
font-weight: bold; 
} 
.STYLE2 {font-size: 12px; font-weight: bold; } 
body,td,th { 
font-size: 12px; 
} 
a:link { 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
} 
a:hover { 
text-decoration: none; 
} 
a:active { 
text-decoration: none; 
} 
--> 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> 
<body> 
<center> 
<h1>XML文档内容的分页显示 </h1> 
<script language="javascript"> 
var page_count=4; //每页显示几条数据 
var page=0 ; 
var pages ; 
var bodyText=""; 
var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 
var mode="employe"; //定义标签名称 
var toolbar; 
xmldoc.async="false" 
xmldoc.load("xml.mxl") //调用指定的XML文件 
<!-----------创建表格------------> 
header=" <table width=650 border=1 align=center cellpadding=1 cellspacing=1> <tr> <td 

height=30 class=STYLE1 align=center>员工编号 </td> <td  class=STYLE1 align=center>姓名 </td> 

<td class=STYLE1 align=center>部门 </td> <td class=STYLE1 align=center>电话 </td> <td 

class=STYLE1 align=center>地址 </td> <td class=STYLE1 align=center>邮箱 </td> </tr>"; 
<!-------------------------------> 
max_count = xmldoc.getElementsByTagName(mode).length //获取记录总数 
col_count=xmldoc.getElementsByTagName(mode).item(0).childNodes     //每条记录的列数 
col_counts=col_count.length     //每条记录的列数 
//计算总页数 
pages_count=Math.ceil(max_count/page_count)-1; 
pages_count2=Math.ceil(max_count/page_count); 
function up_page(page){ //上一页 
thepage="上一页"; 
    if(page+1>1) thepage=" <a href='#' onclick='Javascript:return up_page_go()'>上一页 

</a>"; 
    return thepage; 
} 
function next_page(page){ //下一页 
    thepage="下一页"; 
    if(page <pages_count) thepage=" <a href='#' onclick='Javascript:return next_page_go()'>

下一页 </a>"; 
    return thepage; 
} 
function up_page_go(){ //进入前一页 
if(page>0) page--; 
    getcontent(); 
    bodyText=""; 
} 
function current_page(){ //计算当前页数 
    var current_pages; 
    current_pages="第"+(page+1)+"页"; 
    return current_pages; 
} 
function count_pages(){ //计算总的页数 
    var count_pagess; 
    count_pagess='共'+(pages_count+1)+'页'; 
    return count_pagess 
} 
function next_page_go(){ //进入下一页 
if (page <pages_count) page++; 
    getcontent(); 
    bodyText=""; 
} 

function page_bar(page){  //显示分页状态 
    var page_bars; 
    page_bars=current_page()+"  "+count_pages()+"  "+up_page(page)+"  "+select_page()+"  

"+next_page(page); 
    return page_bars; 
} 
function change_page(tpage){  //更改页码    
    page=tpage 
    if(page>=0) page--; 
    if (page <pages_count) page++; 
    getcontent(); 
    bodyText=""; 
} 
function select_page(){ //选择页码 
    var sp; 
    sp=" <select name='hehe' onChange='javascript:change_page(this.options

[this.selectedIndex].value)'>"; 
    sp=sp+" <option value='选择页'>选择页 </option>"; 
    for (t=0;t <=pages_count;t++){ 
    sp=sp+" <option value='"+t+"'>"+(t+1)+" </option>"; 
    } 
    sp=sp+" </select>" 
    return sp; 
} 
function getcontent(){  //输出数据 
if (!page) page=0; 
    n=page*page_count; 
    end_count=(page+1)*page_count; 
    if(end_count>max_count)end_count=max_count; //如果超出页面的范围,则取最后一页 
    bodyText=header+bodyText; 
    for(;n <end_count;n++){ //读取页的内容 
    bodyText=bodyText+" <tr>"; //行开始 
        for(m=0;m <=col_counts-1;m++){    //读取列的内容 
        m_name=col_count.item(m).tagName; 
            bodyText=bodyText+(" <td class=STYLE2 height=24 

align=center>&nbsp;"+xmldoc.getElementsByTagName(m_name).item(n).text+"&nbsp; </td>"); 
        } 
        bodyText=bodyText+" </tr>" //行结束 
        mm=""; 
    } 
    look_xml.innerHTML=bodyText+" </table> <br>"+page_bar(page); //表格,页结束 
bodyText="" 
} 
</script> 
<div id="look_xml"> </div> 
<script> 
if (max_count==0){ 
document.write("没有检索到员工信息") 
}else{ 
    getcontent() 
} 
</script> 
</center> 
</body> 
</html> 


//============ xml.xml

<?xml version="1.0" encoding="GB2312"?> 
<employes> 
<employe id='1'> 
<number>1001 </number> 
<name>李** </name> 
<object>PHP </object> 
<tel>84978981 </tel> 
<address>长春市 </address> 
<e_mail>li**@sina.com </e_mail> 
</employe> 
<employe id='2'> 
<number>1002 </number> 
<name>高** </name> 
<object>VB </object> 
<tel>84978981 </tel> 
<address>长春市 </address> 
<e_mail>gao**@sina.com </e_mail> 
</employe> 
<employe id='3'> 
<number>1003 </number> 
<name>李** </name> 
<object>JSP </object> 
<tel>84978981 </tel> 
<address>长春市 </address> 
<e_mail>li**@mr.com </e_mail> 
</employe> 
<employe id='4'> 
<number>1004 </number> 
<name>伍** </name> 
<object>ASP </object> 
<tel>84978981 </tel> 
<address>长春市 </address> 
<e_mail>wu**@mr.com </e_mail> 
</employe> 
<employe id='5'> 
<number>1005 </number> 
<name>刘** </name> 
<object>.NET </object> 
<tel>84978981 </tel> 
<address>吉林市 </address> 
<e_mail>liu**@sina.com </e_mail> 
</employe> 
<employe id='6'> 
<number>1006 </number> 
<name>郭** </name> 
<object>PHP </object> 
<tel>84978981 </tel> 
<address>长春市 </address> 
<e_mail>guo**@mr.com </e_mail> 
</employe> 
</employes>