使用JavaScript操作XML數據据

于 2005-06-23 09:37:00 发布
阅读量2.6k 收藏
点赞数
文章标签： xml javascript input button user encoding

<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")


//加载文档
//doc.load("b.xml");

//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0'  encoding='gb2312'");

    //添加文件头
    doc.appendChild(p);

//用于直接加载时获得根接点
//var root = doc.documentElement;

//两种方式创建根接点
//    var root = doc.createElement("students");
    var root = doc.createNode(1,"students","");

    //创建子接点
    var n = doc.createNode(1,"ttyp","");

        //指定子接点文本
        //n.text = " this is a test";
   
    //创建孙接点
    var o = doc.createElement("sex");
        o.text = "男";    //指定其文本

    //创建属性
    var r = doc.createAttribute("id");
        r.value="test";

        //添加属性
        n.setAttributeNode(r);

    //创建第二个属性   
    var r1 = doc.createAttribute("class");
        r1.value="tt";
       
        //添加属性
        n.setAttributeNode(r1);

        //删除第二个属性
        n.removeAttribute("class");

        //添加孙接点
        n.appendChild(o);

        //添加文本接点
        n.appendChild(doc.createTextNode("this is a text node."));

        //添加注释
        n.appendChild(doc.createComment("this is a comment/n"));
   
        //添加子接点
        root.appendChild(n);
   
    //复制接点
    var m = n.cloneNode(true);

        root.appendChild(m);
       
        //删除接点
        root.removeChild(root.childNodes(0));

    //创建数据段
    var c = doc.createCDATASection("this is a cdata");
        c.text = "hi,cdata";
        //添加数据段
        root.appendChild(c);
   
    //添加根接点
    doc.appendChild(root);

    //查找接点
    var a = doc.getElementsByTagName("ttyp");
    //var a = doc.selectNodes("//ttyp");

    //显示改接点的属性
    for(var i= 0;i<a.length;i++)
    {
        alert(a[i].xml);
        for(var j=0;j<a[i].attributes.length;j++)
        {
            alert(a[i].attributes[j].name);
        }
    }

    //XML保存（需要在服务端，客户端用FSO）
    //doc.save();
   
    //查看根接点XML
    if(n)
    {
        alert(n.ownerDocument.xml);
    }

//-->
</script>

http://free3.e-168.cn/sailing27/xtable/index.jsp
这儿有个例子。兼容IE和FF。有源码可以下载，希望能帮得上忙。

http://www.xml.org.cn 上面有很多电子书

实例1：利用xml数据岛分页.htm
************************************************
<xml id="users">
<userGroup>
  <user>
    <userid>user 1</userid>
    <name>name 1</name>
  </user>
  <user>
    <userid>user 2</userid>
    <name>name 2</name>
  </user>
  <user>
    <userid>user 3</userid>
    <name>name 3</name>
  </user>
  <user>
    <userid>user 4</userid>
    <name>name 4</name>
  </user>
  <user>
    <userid>user 5</userid>
    <name>name 5</name>
  </user>
  <user>
    <userid>user 6</userid>
    <name>name 7</name>
  </user>
  <user>
    <userid>user 7</userid>
    <name>name 7</name>
  </user>
  <user>
    <userid>user 8</userid>
    <name>name 8</name>
  </user>
  <user>
    <userid>user 9</userid>
    <name>name 9</name>
  </user>
</userGroup>
</xml>
<table id="datatable" datasrc="#users" DATAPAGESIZE="3" width="400" border="1">
<tr>
    <td><span datafld="userid"></span></td>
    <td><span datafld="name"></span></td>
</tr>
</table>
<button οnclick="document.all.datatable.previousPage()">Previous Page</button>
<button οnclick="document.all.datatable.nextPage()">Next Page</button>
************************************************

实例2：xml数据岛实例1.htm
************************************************
<HTML>
<HEAD><Title>HTML中的数据岛中的记录集</Title></HEAD>
<body bkcolor=#EEEEEE text=blue bgcolor="#00FFFF">
<Table align=center width="100%"><TR><TD align="center">
   <h5><b><font size="4" color="#FF0000">HTML中的XML数据岛记录编辑与添加</font></b></h5>
  </TD></TR></Table>
<HR>
酒店名称：<input type=text datasrc=#theXMLisland DataFLD=NAME size="76"><BR>
　　地址：<input type=text datasrc=#theXMLisland DataFLD=Address size="76"><BR>
　　主页：<input type=text datasrc=#theXMLisland DataFLD=HomePage size="76"><BR>
电子邮件：<input type=text datasrc=#theXMLisland DataFLD=E-Mail size="76"><BR>
　　电话：<input type=text datasrc=#theXMLisland DataFLD=TelePhone size="76"><BR>
　　级别：<input type=text datasrc=#theXMLisland DataFLD=Grade size="76"><HR>
<input id="first" TYPE=button value="<<　第一条记录" οnclick="theXMLisland.recordset.moveFirst()">
<input id="prev" TYPE=button value="<上一条记录" οnclick="theXMLisland.recordset.movePrevious()"> 
<input id="next" TYPE=button value="下一条记录>" οnclick="theXMLisland.recordset.moveNext()"> 
<input id="last" TYPE=button value="最后一条记录>>" οnclick="theXMLisland.recordset.moveLast()">&nbsp; 
<input id="Add" TYPE=button value="添加新记录" οnclick="theXMLisland.recordset.addNew()"> 

<XML ID="theXMLisland">
<HotelList>
<Hotel>
<Name>四海大酒店</Name>
<Address>海魂路1号</Address>
<HomePage>www.sihaohotel.com.cn</HomePage>
<E-Mail>master@sihaohotel.com.cn</E-Mail>
<TelePhone>(0989)8888888</TelePhone>
<Grade>五星级</Grade>
</Hotel>
<Hotel>
<Name>五湖宾馆</Name>
<Address>东平路99号</Address>
<HomePage>www.wuhu.com.cn</HomePage>
<E-Mail>web@wuhu.com.cn</E-Mail>
<TelePhone>(0979)1111666</TelePhone>
<Grade>四星级</Grade>
</Hotel>
<Hotel>
<Name>“大沙漠”宾馆</Name>
<Address>留香路168号</Address>
<HomePage>www.dashamohotel.com.cn</HomePage>
<E-Mail>master@dashamohotel.com.cn</E-Mail>
<TelePhone>(0989)87878788</TelePhone>
<Grade>五星级</Grade>
</Hotel>
<Hotel>
<Name>“画眉鸟”大酒店</Name>
<Address>血海飘香路2号</Address>
<HomePage>www.throstlehotel.com.cn</HomePage>
<E-Mail>chuliuxiang@throstlehotel.com.cn</E-Mail>
<TelePhone>(099)9886666</TelePhone>
<Grade>五星级</Grade>
</Hotel>
</HotelList>
</XML>
</body> 
</HTML>
************************************************

实例3：XML连动表单.htm
************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript1.2">
function ChooseState()
{
  var source;
  var sourceName = "Citys.xml";
  var source = new ActiveXObject('Microsoft.XMLDOM');   //创建一个MSXML解析器实例
  source.async = false;
  source.load(sourceName);   //装入XML文档
  root = source.documentElement;   //设置文档元素为根节点元素
  sortField=root.selectNodes("//@name");   //搜索属性中含有name的所有节点
  for(var i=0;i<sortField.length;++i)   //增加省份名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
     form1.SelState.options.add(oOption);
  }
   ChooseCity();
}

//自定义函数：ChooseCity
//(根据当前选定的省名来读取XML数据中的对应城市名称，并增加到SelCity的下拉列表中)
function ChooseCity()
{
  x=form1.SelState.selectedIndex;   //读取省份下拉框的当前选项
  y=form1.SelState.options[x].value;
  sortField=root.selectNodes("//State[@name='"+y+"']/City");   //搜索name属性值等于参数y的State节点下的所有city节点
  for(var i=form1.SelCity.options.length-1;i>=0;--i)   //撤消原来的列表项
  {
    form1.SelCity.options.remove(i)
  }
  for(var i=0;i<sortField.length;++i)   //增加城市名称到下拉列表
  {
    var oOption = document.createElement('OPTION');
    oOption.text = " "+sortField[i].text+" ";
    oOption.value = sortField[i].text;
    form1.SelCity.options.add(oOption);
  }
}
</script>
</head>

<BODY onLoad="ChooseState()">
<FORM action="" method="post" id="form1" name="form1">
<SELECT name="SelState" id="SelState" οnchange="ChooseCity()" >
</SELECT>
<SELECT name="SelCity" id="SelCity" >
</SELECT>
</FORM>
</BODY>
</html>

附  Citys.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
  <State id="1" name="江西">
    <City>九江</City>
    <City>南昌</City>
    <City>庐山</City>
    <City>景德镇</City>
  </State>
  <State id="2" name="北京">
    <City>北京西</City>
    <City>居庸关</City>
    <City>清华园</City>
    <City>周口店</City>
  </State>
  <State id="3" name="福建">
    <City>福州</City>
    <City>厦门</City>
    <City>漳州</City>
  </State>
  <State id="4" name="甘肃">
    <City>兰州</City>
    <City>洛门</City>
    <City>嘉峪关</City>
  </State>
  <State id="5" name="广东">
    <City>广州</City>
    <City>深圳</City>
    <City>东莞</City>
    <City>石牌</City>
  </State>
  <State id="6" name="安徽">
    <City>合肥</City>
    <City>黄山</City>
    <City>九龙岗</City>
    <City>马鞍山</City>
  </State>
</China>
************************************************

TonWu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值