昨天因工作需要考虑静态htm查询数据,因工作很急,改用描点技术定位到指定资源,早上到公司就着手考虑是否可以通过xml方式实现,查得资料:
xml3:
功能很不错,但是查询后需要重新绑定数据,这点还没实现,不过获得自己认为新的东西,与大家分享,还是不错!
<
html
>
< head >
< title > 中文标识的xml数据调用 </ title >
</ head >
< body >
< xml id ="CNxml" src ="xml3.xml" ></ xml >
请输入要查询名字:
< input type ="text" id ="m" width ="3" size ="5" >< input type ="button" value ="查找" onclick ="query()" >
< br >< br >
< input type ="text" id ="title" >< br >
< textarea cols ="30" rows ="10" id ="content" ></ textarea >
< h2 >
表格调用xml数据并分页现显示 </ h2 >
< table >
<!-- 列名单独作为一个表是为了不让它重复出现 -->
< tr >
< td width ="50" >
姓名 </ td >
< td width ="50" >
性别 </ td >
< td width ="50" >
年龄 </ td >
</ tr >
</ table >
< table id ="ygTable" datasrc ="#CNxml" datapagesize ="3" >
<!-- "DATAPAGESIZE"是设定每页显示的记录数 -->
<!-- 本table的标志,是用来控制页的滚动的行为对象 -->
< tr >
< td width ="50" >
< span datafld ="姓名" ></ span >
</ td >
< td width ="50" >
< span datafld ="性别" ></ span >
</ td >
< td width ="50" >
< span datafld ="年龄" ></ span >
</ td >
</ tr >
</ table >
< br >
<!-- 该javascrip脚本函数实现页跳转功能 -->
< script language ="javascript" >
function go(pageNum)
{
ygTable.firstPage();
for(var i=1; i<pageNum; i++) //不知道定位函数所以用循环来寻找应当到的页数
ygTable.nextPage();
}
function query()
{
//得到文章的标题
// s=document.all.Text.XMLDocument;
temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/性别");
if(temp==null) title.value='没有这个标题';
else title.value=temp.text;
//得到文章的内容
temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/年龄");
if(temp==null) content.value='没有内容';
else content.value=temp.text;
ygTable.dataSrc="CNxml";
}
function CreateXML(){
var xmldoc, xmlnode;
xmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("C://XML.xml");
schar = '/r';
xmlhead = '<?xml version="1.0" encoding="UTF-16" ?>'+schar;
xmltitle = '<documenttitle="information">'+schar;
xmlnode = '';
for(var i=0;i<10;i++){
xmlnode = xmlnode + '<xmlnode type="node" name="node'+i+'" />'+schar;
}
xmlfoot = '</document>';
strXML = xmlhead+xmltitle+xmlnode+xmlfoot;
xmldoc.loadXML(strXML);
xmldoc.save("C://XML.xml");
}
</ script >
}
</ script >
< a href ="javascript:go(1)" > 1 </ a > < a href ="javascript:go(2)" > 2 </ a > < a href ="javascript:go(3)" >
3 </ a >
< br >
<!-- onclick行为中,是以本table为主体对象调用的函数,可见这种方法实现份也是多么的简单 -->
< input type ="button" value ="第一页" name ="B1" onclick ="ygTable.firstPage()" >
< input type ="button" value ="上一页" name ="B2" onclick ="ygTable.previousPage()" >
< input type ="button" value ="下一页" name ="B3" onclick ="ygTable.nextPage()" >
< input type ="button" value ="最后一页" name ="B4" onclick ="ygTable.lastPage()" >
<!-- 页跳转功能,同样用到了上面javascript定义的脚本程序函数 -->
< input type ="text" name ="pageto" value ="1" size ="5" >
< input type ="button" value ="跳转" onclick ="go(pageto.value)" >
</ body >
</ html >
< head >
< title > 中文标识的xml数据调用 </ title >
</ head >
< body >
< xml id ="CNxml" src ="xml3.xml" ></ xml >
请输入要查询名字:
< input type ="text" id ="m" width ="3" size ="5" >< input type ="button" value ="查找" onclick ="query()" >
< br >< br >
< input type ="text" id ="title" >< br >
< textarea cols ="30" rows ="10" id ="content" ></ textarea >
< h2 >
表格调用xml数据并分页现显示 </ h2 >
< table >
<!-- 列名单独作为一个表是为了不让它重复出现 -->
< tr >
< td width ="50" >
姓名 </ td >
< td width ="50" >
性别 </ td >
< td width ="50" >
年龄 </ td >
</ tr >
</ table >
< table id ="ygTable" datasrc ="#CNxml" datapagesize ="3" >
<!-- "DATAPAGESIZE"是设定每页显示的记录数 -->
<!-- 本table的标志,是用来控制页的滚动的行为对象 -->
< tr >
< td width ="50" >
< span datafld ="姓名" ></ span >
</ td >
< td width ="50" >
< span datafld ="性别" ></ span >
</ td >
< td width ="50" >
< span datafld ="年龄" ></ span >
</ td >
</ tr >
</ table >
< br >
<!-- 该javascrip脚本函数实现页跳转功能 -->
< script language ="javascript" >
function go(pageNum)
{
ygTable.firstPage();
for(var i=1; i<pageNum; i++) //不知道定位函数所以用循环来寻找应当到的页数
ygTable.nextPage();
}
function query()
{
//得到文章的标题
// s=document.all.Text.XMLDocument;
temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/性别");
if(temp==null) title.value='没有这个标题';
else title.value=temp.text;
//得到文章的内容
temp=CNxml.selectSingleNode("/员工表/员工[姓名='"+m.value+"']/年龄");
if(temp==null) content.value='没有内容';
else content.value=temp.text;
ygTable.dataSrc="CNxml";
}
function CreateXML(){
var xmldoc, xmlnode;
xmldoc = new ActiveXObject("Msxml2.DOMDocument.4.0");
xmldoc.load("C://XML.xml");
schar = '/r';
xmlhead = '<?xml version="1.0" encoding="UTF-16" ?>'+schar;
xmltitle = '<documenttitle="information">'+schar;
xmlnode = '';
for(var i=0;i<10;i++){
xmlnode = xmlnode + '<xmlnode type="node" name="node'+i+'" />'+schar;
}
xmlfoot = '</document>';
strXML = xmlhead+xmltitle+xmlnode+xmlfoot;
xmldoc.loadXML(strXML);
xmldoc.save("C://XML.xml");
}
</ script >
}
</ script >
< a href ="javascript:go(1)" > 1 </ a > < a href ="javascript:go(2)" > 2 </ a > < a href ="javascript:go(3)" >
3 </ a >
< br >
<!-- onclick行为中,是以本table为主体对象调用的函数,可见这种方法实现份也是多么的简单 -->
< input type ="button" value ="第一页" name ="B1" onclick ="ygTable.firstPage()" >
< input type ="button" value ="上一页" name ="B2" onclick ="ygTable.previousPage()" >
< input type ="button" value ="下一页" name ="B3" onclick ="ygTable.nextPage()" >
< input type ="button" value ="最后一页" name ="B4" onclick ="ygTable.lastPage()" >
<!-- 页跳转功能,同样用到了上面javascript定义的脚本程序函数 -->
< input type ="text" name ="pageto" value ="1" size ="5" >
< input type ="button" value ="跳转" onclick ="go(pageto.value)" >
</ body >
</ html >
xml3:
<?
xml version="1.0" encoding="gb2312"
?>
< 员工表 >
< 员工 >
< 姓名 > 张易 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 张晴 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 笑哈哈 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 张晴 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 555 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 666 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 999 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 777 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 888 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
</ 员工表 >
< 员工表 >
< 员工 >
< 姓名 > 张易 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 张晴 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 笑哈哈 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 张晴 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 555 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 666 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 999 </ 姓名 >
< 性别 > 男 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 777 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
< 员工 >
< 姓名 > 888 </ 姓名 >
< 性别 > 女 </ 性别 >
< 年龄 > 23 </ 年龄 >
</ 员工 >
</ 员工表 >
功能很不错,但是查询后需要重新绑定数据,这点还没实现,不过获得自己认为新的东西,与大家分享,还是不错!