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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 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 数组入门教程小结
2009/05/20 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
解析php入库和出库
2013/06/25 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
Prototype Object对象 学习
2009/07/12 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
python十进制转二进制的详解
2020/02/07 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
什么是索引指示器
2012/08/20 面试题
大学班级文化建设方案
2014/05/06 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android