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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
Add Formatted Text to a Word Document
Jun 15 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
学习vue.js条件渲染
Dec 03 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
python requests爬取高德地图数据的实例
2018/11/10 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python实现磁盘日志清理的示例
2020/11/05 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
唐山大地震的观后感
2015/06/05 职场文书