JavaScript操作XML实例代码(获取新闻标题并分页,并分页)


Posted in Javascript onMay 25, 2010

具体内容我没有做测试。仅供参考
代码

<?xml version="1.0" encoding="gb2312"?> 
<NEWS> 
<New id="1" name="测试新闻1" time="2010-2-18"> 
<NBody>新闻测试1新闻测试1</NBody> 
</New> 
<New id="2" name="测试新闻2" time="2010-2-18"> 
<NBody>新闻测试2新闻测试2</NBody> 
</New> 
<New id="3" name="测试新闻3" time="2010-2-18"> 
<NBody>新闻测试3新闻测试3</NBody> 
</New> 
<New id="4" name="测试新闻4" time="2010-2-18"> 
<NBody>新闻测试4新闻测试4</NBody> 
</New> 
<New id="5" name="测试新闻5" time="2010-2-18"> 
<NBody>新闻测试5新闻测试5</NBody> 
</New> 
<New id="6" name="测试新闻6" time="2010-2-18"> 
<NBody>新闻测试6新闻测试6</NBody> 
</New> 
<New id="7" name="测试新闻7" time="2010-2-18"> 
<NBody>新闻测试7新闻测试7</NBody> 
</New> 
<New id="8" name="测试新闻8" time="2010-2-18"> 
<NBody>新闻测试8新闻测试8</NBody> 
</New> 
<New id="9" name="测试新闻9" time="2010-2-18"> 
<NBody>新闻测试9新闻测试9</NBody> 
</New> 
</NEWS>

JS 代码部分。js部分代码比较简单。 重要的就几XML 操作函数
//JavaScript 
function bindNew(index) 
{ 
var List = new Array(); 
List = showPage(index); 
var listul = "<ul style=\" font-size:12px \">" 
for( var i=0 ; i < List.length ; i++) 
{ 
//document.getElementById("listTb").innerHTML += List[i]+"</br>"; 
listul += "<li style=\" margin-top:4px\">"+ List[i] + "</li>"; 
} 
listul += "</ul>"; 
document.getElementById("listTb").innerHTML = listul; 
document.getElementById("refer").innerHTML = ""; 
var tc = rtnPageCount(); 
for( var i=1 ; i<=tc ; i++) 
{ 
//<div style="width:14px; height:12px; color:#FFFFFF; background-color:#000000; float:left"></div> 
document.getElementById("refer").innerHTML += "<div style=\"width:14px; height:14px; color:#FFFFFF; background-color:#000000; float:left; cursor:hand\" onclick=\" bindNew("+i+")\">"+ i +"</div>"; 
} 
} 
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async = false; 
xmlDoc.resolveExternals = false; 
xmlDoc.load("News.xml"); 
// 返回固定 ID 的新闻 
function findNew(newid) 
{ 
var Domelement = xmlDoc.documentElement; 
alert(Domelement); 
} 
// 返回分页后的新闻标题连接 
var pageSize = 40; 
function showPage(pageIndex) 
{ 
var Alltt = new Array(); 
Alltt = AlltitleLink(); 
var rtLinks = new Array(); 
/*未完成部分*/ 
try 
{ 
for( var i=0 ; i< pageSize && (pageSize*(pageIndex-1)+i)<Alltt.length ; i++) 
{ 
rtLinks[i] = Alltt[pageSize*(pageIndex-1)+i]; 
} 
} 
catch(e) 
{ alert("showPage() 方法出错 !"); } 
return rtLinks; 
} 
//返分页后的页数 
function rtnPageCount() 
{ 
var countx = getCount(); 
if(countx%pageSize == 0) 
{ 
return countx/pageSize ; 
} 
else 
{ 
return countx/pageSize + 1 ; 
} 
} 
//返回新闻条数 
function getCount() 
{ 
var NewRoot = xmlDoc.documentElement; 
var AllNews = NewRoot.childNodes; 
return AllNews.length; 
} 
//返回固定条数的新闻标题连接 
function returnNews(count) 
{ 
var titles = new Array(); 
var j = 0; 
NewRoot = xmlDoc.documentElement; 
allNews = NewRoot.childNodes; 
for( var i=0 ; i<allNews.length ; i++ ) 
{ 
if(i >= allNews.lenth) 
{ 
titles[j] = "<a herf=\"../News.html?id=" + (i+1) + "\">"+ allNews[i].getArrtibute("name") +"</a>"; 
j++; 
} 
} 
return titles; 
} 
//发回所有新闻 标题的超连接 
function AlltitleLink() 
{ 
var allttLink = new Array(); 
var NewRoot = xmlDoc.documentElement ; 
var allNews = NewRoot.childNodes; 
for( var i=0 ; i<allNews.length ; i++ ) 
{ 
var context = allNews[i]; 
allttLink[i] = "<a href=\"../News.html?id="+(i+1)+"\">"+ context.getAttribute("time")+ " : " + context.getAttribute("name") +"</a>"; 
} 
return allttLink; 
}

部分Html 代码
<table width="90%" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; text-align:left"> 
<tr> 
<td><div style="width:400px; border-bottom:1px dotted #999999; color:#333333; font-weight:bold">全部动态>></div></td> 
</tr> 
<tr> 
<td> 
<div id="listTb" class="listul"></div> </td> 
</tr> 
<tr> 
<td> 
<div id="refer"></div> </td> 
</tr> 
</table>

希望对大家的学习工作又所帮助, 欢迎提问反馈
Javascript 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jquery实现图片预加载
Dec 25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 #Javascript
js 设置选中行的样式的实现代码
May 24 #Javascript
基于jquery的direction图片渐变动画效果
May 24 #Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
You might like
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
自我反省检讨书
2014/01/23 职场文书
财务部经理岗位职责
2014/02/03 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
求职自我评价范文100字
2014/09/23 职场文书
为自己工作观后感
2015/06/11 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
Python多线程 Queue 模块常见用法
2021/07/04 Python