JS读取Xml文件节点属性

CrazyJayFans 2011-12-10 11:46:35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<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: 600px;
margin-bottom: 10px;
}
tr {
height: 30px;
}
.bordertyle {
font-family: sans-serif;
text-align: center;
}

.btn {
margin-left: 30px;
margin-right: 30px;
}
label {
font-size: 20px;
font-family: sans-serif;
}
</style>

<script language="javascript" type="text/javascript">

//***********js操作XML*************
//* author:luobin *
//* Email:luobin23628@163.com *
//*********************************
/*
function loadXML(xmlFile){
var xmlDoc;
if(!window.ActiveXObject){
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlFile,"text/xml");
}else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
*/
//针对两种浏览器，分别获取xmlDocument对象
function loadXML(xmlFile)
{
var xmlDoc;
if(window.ActiveXObject) {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(xmlFile);
}
else if(document.implementation&&document.implementation.createDocument){
xmlDoc=document.implementation.createDocument( "", "",null);
xmlDoc.async=false;
xmlDoc.load(xmlFile);
} else{
alert('Your browser cannot handle this script');
}
return xmlDoc;
}

var xmlDoc = loadXML("custInfo.xml");

var members = xmlDoc.getElementsByTagName("custNo");
var maxRes = members.length;

var pageShow = 5;
var currentPage = 1;

var maxPage = Math.ceil(maxRes/pageShow);

//此方法只能在body标签中或后调用
function retrieve(){
var oDiv = document.createElement("div");
oDiv.id = "showhtml"
oDiv.className = "bordertyle";
if(maxRes){
var oTable = generateTable(oDiv,(currentPage-1)*pageShow,currentPage*pageShow);

var pageInf = document.createElement("div");

var oLabel = document.createElement("label");
oLabel.innerHTML = "共条"+maxRes+"记录,当前第";
pageInf.appendChild(oLabel);

var curLabel = document.createElement("label");
curLabel.innerHTML = currentPage;
curLabel.setAttribute("id","curLabel");
pageInf.appendChild(curLabel);

var oLabel3 = document.createElement("label");
oLabel3.innerHTML = "页,共"+maxPage+"页";
pageInf.appendChild(oLabel3);

oDiv.appendChild(pageInf);

var buttonSet = document.createElement("div")
buttonSet.className = "bordertyle";

var firstBtn = document.createElement("button");
firstBtn.innerHTML = "首页";
firstBtn.id = "firstBtn";
firstBtn.className = "btn";
firstBtn.onclick = function(){
goToPage(1,oTable,curLabel);
};
buttonSet.appendChild(firstBtn);

var preBtn = document.createElement("button");
preBtn.id = "preBtn";
preBtn.innerHTML = "前一页";
preBtn.className = "btn";
preBtn.onclick = function(){
if(currentPage>1){
goToPage(currentPage-1,oTable,curLabel);
}
};
buttonSet.appendChild(preBtn);

var tx = document.createElement("input");
tx.value = currentPage;
tx.id = "tx";
tx.size = "2";
buttonSet.appendChild(tx);
var goBtn = document.createElement("button");
goBtn.innerHTML = "GO";
goBtn.onclick = function(){
var txPage = parseInt(tx.value);
goToPage(txPage,oTable,curLabel);
}
buttonSet.appendChild(goBtn);

var nextBtn = document.createElement("button");
nextBtn.innerHTML = "下一页";
nextBtn.id = "nextBtn";
nextBtn.className = "btn";
nextBtn.onclick = function(){
if(currentPage<maxPage){
goToPage(currentPage+1,oTable,curLabel);
}
};
buttonSet.appendChild(nextBtn);

var lastBtn = document.createElement("button");
lastBtn.innerHTML = "末页";
lastBtn.id = "lastBtn";
lastBtn.className = "btn";
lastBtn.onclick = function(){
goToPage(maxPage,oTable,curLabel);
};
buttonSet.appendChild(lastBtn);

oDiv.appendChild(buttonSet);
}else{
oDiv.innerHTML = "无记录";
}
document.body.appendChild(oDiv);
alterButton();//先把oDiv加到body之后才可调用，害我犯了错误
}

function generateTable(oDiv,start,end){
var oTable = document.createElement("table");
generateTableHead(oTable);
generateTableContent(oTable,start,end);
oDiv.appendChild(oTable);
return oTable;
}

function generateTableHead(oTable){
var oTr = oTable.insertRow(-1);

var oTd = oTr.insertCell(-1);
oTd.innerHTML = "姓名";//ie支持innerText，ff支持textContent 这里就偷懒的写法，改成innerHTML
/**
if(oTd.innerText){
oTd.innerText = "name";
}else{
oTd.textContent = "name";
}
**/

var oTd2 = oTr.insertCell(-1);
oTd2.innerHTML = "性别";

var oTd3 = oTr.insertCell(-1);
oTd3.innerHTML = "生日";

var oTd4 = oTr.insertCell(-1);
oTd4.innerHTML = "会员编号";
}

function generateTableContent(oTable,start,end){
end = (end>maxRes)?maxRes:end;
for(var i=start;i<end;i++){
var oTr = oTable.insertRow(-1);//ff中insertRow必须加上参数，而ie默认为-1
oTr.id = members[i].getAttribute("id");

var oTd = oTr.insertCell(-1);
var oName = members[i].getElementsByTagName("name");
oTd.innerHTML = oName[0].firstChild.nodeValue;//刚开始用的oName[0].text,不兼容ff，现在统一替换成oName[0].firstChild.nodeValue

var oTd2 = oTr.insertCell(-1);
var oLoginName = members[i].getElementsByTagName("sex");
oTd2.innerHTML = oLoginName[0].firstChild.nodeValue;

var oTd3 = oTr.insertCell(-1);
var birthday = members[i].getElementsByTagName("birthday");
//获取生日
//var custBir_year=birthday[i].getAttribute("year");
/*var custBir_month=birthday[i].getAttribute("month");
var custBir_day=birthday[i].getAttribute("day");

var birStr=custBir_year+"-"+custBir_month+"-"+custBir_day;*/
//document.write(birthday[0].firstChild.nodeValue);
oTd3.innerHTML ="";
//oTd3.innerHTML ="<span>"+birStr+"</span>";
//会员编号
var oTd4 = oTr.insertCell(-1);
oTd4.innerHTML =oTr.id;
}
}

function removeTableContent(oTable){
if(oTable.rows.length>1){
for(var i=oTable.rows.length-1;i>=1;i--){
oTable.deleteRow(i);
}
}
}

function alterButton(){
preBtn.disabled = (currentPage<=1)?true:false;
nextBtn.disabled = (currentPage>=maxPage)?true:false;
firstBtn.disabled = (currentPage==1)?true:false;
lastBtn.disabled = (currentPage==maxPage)?true:false;
}

function goToPage(page,oTable){
//此处还要加个正则表达式校验page是数字，js的正则表达式还不会有待进一步学习
if(page<1){
window.alert("您输入的页数小于等于0,请输入一个0到"+maxPage+"的整数");
return;
}
if(page>maxPage){
window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxPage+"的整数");
return;
}
removeTableContent(oTable);
currentPage = page;
var start = (currentPage-1)*pageShow;
var end = currentPage*pageShow;
tx.value = currentPage;
curLabel.innerHTML = currentPage;
generateTableContent(oTable,start,end);
alterButton();
}

</script>
<script type="text/javascript">
</script>
</HEAD>
<BODY>
<!--<script type="text/javascript">
retrieve();
</script>-->
<input name="" type="button" onClick="retrieve()" value="获取信息">
</BODY>
</HTML>

xml文件：text.xml
<?xml version="1.0" encoding="GB2312"?>
<rautinee>
<member id='1'>
<name>海仔</name>
<loginName>rautinee</loginName>
<email>rautinee@btamail.net.cn</email></member>
<member id='2'>
<name>刚强</name>
<loginName>hehe</loginName>
<email>rautinee@chinamanagers.com</email></member>
<member id='3'>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='4'>
<name>的简强</name>
<loginName>tank</loginName>
<email>tank@163.com</email></member>
<member id='7'>
<name>合资</name>
<loginName>kaka</loginName>
<email>kaka@eyou.com</email></member>
<member id='6'>
<name>加个人</name>
<loginName>apple</loginName>
<email>apple@163.com</email></member>
<member id='8'>
<name>null</name>
<loginName>sunny</loginName>
<email>rautinee@eyou.com</email></member>
<member id='10'>
<name>宝贝</name>
<loginName>index</loginName>
<email>rautinee@21cn.com</email></member>
<member id='12'>
<name>login</name>
<loginName>login</loginName>
<email>webmaster@chinamanagers.com</email></member>
<member id='13'>
<name>jiang</name>
<loginName>123</loginName>
<email>japing@chianmanagers.com</email></member>
<member id='14'>
<name>world</name>
<loginName>world</loginName>
<email>rautinee@21cn.com</email></member>
<member id='15'>
<name>swallow</name>
<loginName>swallow</loginName>
<email>swallow@chinamanagers.com</email></member>
<member id='16'>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='17'>
<name>wrong</name>
<loginName>wrong</loginName>
<email>wrong@chinamanagers.com</email></member>
<member id='18'>
<name>leah</name>
<loginName>leah</loginName>
<email>leah@chinamanagers.com</email></member>
<member id='19'>
<name>ttth</name>
<loginName>ttth</loginName>
<email>rautinee@21cn.com</email></member>
</rautinee>
...全文
1667 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
hdw_kkkkk 2012-03-22
  • 打赏
  • 举报
 回复
还现实了分页？
CrazyJayFans 2011-12-10
  • 打赏
  • 举报
 回复
哦 谢谢 这是我之前获取的方式，难怪一直不对呢！

var custBir_year=birthday[i].getAttribute("year");
var custBir_month=birthday[i].getAttribute("month");
var custBir_day=birthday[i].getAttribute("day");
var birStr=custBir_year+"-"+custBir_month+"-"+custBir_day
oTd3.innerHTML =birStr;
孟子E章 2011-12-10
  • 打赏
  • 举报
 回复
var birthday = members[i].getElementsByTagName("birthday");
//获取生日
oTd3.innerHTML = birthday[0].getAttribute("year") + "-" + birthday[0].getAttribute("month") + "-" + birthday[0].getAttribute("day");
是可以的

在firefox8和ie8下测试通过
CrazyJayFans 2011-12-10
  • 打赏
  • 举报
 回复
读取的xml文件：
<?xml version="1.0" encoding="GB2312"?>
<rautinee>
<custNo id='1'>
<name>周杰伦</name>
<sex>男</sex>
<birthday year='1989' month='11' day='11'>1989-11-30</birthday>
</custNo>
<custNo id='2'>
<name>王宝强</name>
<sex>男</sex>
<birthday year='1979' month='1' day='11'></birthday>
</custNo>
<custNo id='3'>
<name>李玉刚</name>
<sex>男</sex>
<birthday year='1979' month='8' day='15'></birthday>
</custNo>
<custNo id='4'>
<name>赵本山</name>
<sex>男</sex>
<birthday year='1999' month='8' day='14'></birthday>
</custNo>
<custNo id='5'>
<name>王力宏</name>
<sex>男</sex>
<birthday year='1969' month='12' day='19'></birthday>
</custNo>
<custNo id='6'>
<name>蔡依林</name>
<sex>女</sex>
<birthday year='1959' month='11' day='1'>apple@163.com</birthday>
</custNo>
<custNo id='7'>
<name>西城男孩</name>
<sex>男</sex>
<birthday year='1949' month='7' day='1'></birthday>
</custNo>
<custNo id='8'>
<name>宋祖英</name>
<sex>女</sex>
<birthday year='1989' month='11' day='6'></birthday>
</custNo>
<custNo id='9'>
<name>班得瑞</name>
<sex>男</sex>
<birthday year='1989' month='5' day='11'></birthday>
</custNo>
<custNo id='10'>
<name>凤凰传奇</name>
<sex>男</sex>
<birthday year='1989' month='5' day='11'></birthday>
</custNo>
</rautinee>

不能获取birthday 节点的属性 year、month、day=
孟子E章 2011-12-10
  • 打赏
  • 举报
 回复
你哪个地方有问题？
JS读取并输出xml文件节点及属性（兼容IE，FF）
JS读取并输出xml文件节点及属性（兼容IE，FF）
用javascript读取xml文件读取节点数据
主要介绍了用javascript读取xml文件读取节点数据的具体实现,需要的朋友可以参考下
一个ajax功能的JS xml读取封装类代码.rar
一个实现ajax功能的JS xml读取封装类代码，在这个JavaScript类里面，有核心的读取XML文件的代码，同时还包括了新建XML文档对象、在IE下使用ActiveX来创建，异步读取XML文件，创建XMLHttp对象，以备XML文档对象无法...
javascript加载xml 并解析各节点的值(实现方法)
下面小编就为大家带来一篇javascript加载xml 并解析各节点的值(实现方法)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用ajax函数读取xml，然后解析XML.html.rar
用ajax函数读取xml，然后解析XML.html，ajax无刷新读取文件，先使用jQuery加载XML,然后建立一个代码片段，遍历所有student节点，获取id节点，获取节点文本，获取student下的email属性，构造HTML字符串，通过append...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章