|
锁定老帖子 主题：js读取xml
精华帖 (0) :: 良好帖 (0) :: 新手帖 (12) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-18
最后修改：2010-01-21
最近刚学js，写了个用js操作xml的小程序
大家多拍拍砖，指出可以改进的地方 operxml.html文件
<!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: 800px;
margin-bottom: 20px;
}
tr {
height: 40px;
}
.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">
//***********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("test.xml");
var members = xmlDoc.getElementsByTagName("member");
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 = "name";//ie支持innerText，ff支持textContent 这里就偷懒的写法，改成innerHTML
/**
if(oTd.innerText){
oTd.innerText = "name";
}else{
oTd.textContent = "name";
}
**/
var oTd2 = oTr.insertCell(-1);
oTd2.innerHTML = "loginname";
var oTd3 = oTr.insertCell(-1);
oTd3.innerHTML = "email";
}
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("loginName");
oTd2.innerHTML = oLoginName[0].firstChild.nodeValue;
var oTd3 = oTr.insertCell(-1);
var oEmail = members[i].getElementsByTagName("email");
oTd3.innerHTML = oEmail[0].firstChild.nodeValue;
}
}
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>
</BODY>
</HTML>
test.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> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-19
不错不错！
如果分页这排固定位置就更好了 |
| 返回顶楼 | |
|
发表时间：2010-01-19
如果分页这排固定位置就更好了
|
| 返回顶楼 | |
|
发表时间：2010-01-19
只能对付IE，跨浏览器如何解决
|
| 返回顶楼 | |
|
发表时间：2010-01-20
GOOD 不错 要是再强大点就好了
|
| 返回顶楼 | |
|
发表时间：2010-01-20
下方的翻页信息和按钮是乱码
|
| 返回顶楼 | |
|
发表时间：2010-01-20
各列的宽度是随着内容的长短改变的
可否固定？或者页面上可设置这一属性 |
| 返回顶楼 | |
|
发表时间：2010-01-20
多谢各位提出意见
晚上回去再改改 |
| 返回顶楼 | |
|
发表时间：2010-01-21
小伙有前途！
|
| 返回顶楼 | |
|
发表时间：2010-01-21
最后修改：2010-01-21
多谢各位的意见，尤其是felsenlee,昨天也正在研究项目浏览器的兼容问题
昨天一直没空，今天上午比较闲，做好了js的兼容 css的兼容还没有做，程序在ie和ff上都可以跑了 只是样式还需要调整，重新上传了下，大家多发表意见 无意中发现了输入页数的bug，已修正 |
| 返回顶楼 | |
