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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js脚本实现数据去重
Nov 27 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS前端笔试题分析
Dec 19 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
AngularJS中scope的绑定策略实例分析
Oct 30 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
global.php
2006/12/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php实现aes加密类分享
2014/02/16 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
浅析python中的分片与截断序列
2016/08/09 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python 实现二维列表转置
2019/12/02 Python
Python实现简单的2048小游戏
2021/03/01 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
六查六看自查材料
2014/02/17 职场文书
自动一体化专业求职信
2014/03/15 职场文书
驾驶员培训方案
2014/05/01 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android