javascript操作xml(增删改查)例子代码hta版

    包括了stu.hta(是HTML应用程序);
         stu.xml
    注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!

    文件stu.hta代码如下:

    复制代码 代码如下:

    <html>
    <head>
    <title> 数据岛的显示 </title>
    <style type=”text/css”>
    #findPanel
    {
    position:absolute;
    width:220px;
    border:1px solid #666666;
    }
    #findPanelTitle
    {
    height:10px;
    background-color:#336699;
    cursor:move;
    }
    #findPanelContent
    {
    padding:5px 5px 5px 5px;
    background-color:#6699CC;
    }
    </style>
    </head>
    <body>
    <SCRIPT LANGUAGE=”JavaScript”>
    <!–
    var xmlDoc = new ActiveXObject(“Msxml2.DOMDocument”);
    xmlDoc.async = false;
    xmlDoc.resolveExternals = false;
    xmlDoc.load(“stu.xml”);
    //alert(xmlDoc.xml);
    //显示数据
    function show(){
    var vbo = document.getElementById(“s”).value;
    if(vbo==”显示学生信息”){
    document.getElementById(‘info’).style.visibility=’visible’;
    document.getElementById(“s”).value=”隐藏学生信息”;
    }else{
    document.getElementById(‘info’).style.visibility=’hidden’;
    document.getElementById(“s”).value=”显示学生信息”;
    }
    }
    //查找
    function que(){
    document.getElementById(“ad”).style.visibility=”visible”;
    document.getElementById(“qmd”).style.visibility=”visible”;
    }
    /**
    * 解析XML文件函数
    * @param xmlDoc XML对象
    * @param name 属性名称 格式如:user.name
    */
    function getXMLProperty(xmlDoc, name) {
    var keys = name.split(‘.’);
    var node = xmlDoc.documentElement;
    for(var i=0; i<keys.length; i++) {
    var childs = node.childNodes;
    var key = keys[i];
    for(var k=0; k<childs.length; k++) {
    var child = childs[k];
    if(child.nodeName == key) {
    if(child.childNodes.length == 1) {
    return child.text;
    } else {
    node = child;
    break;
    }
    }
    }
    }
    return “”;
    }
    //返回父节点(通过节点名字和节点值)
    function getNod(nam,val){
    var node = xmlDoc.documentElement;
    var childs = node.childNodes;
    for (var i=0;i<childs.length ;i++ )
    {
    var child = childs[i];
    var childms = child.childNodes;
    for(var k=0;k<childms.length;k++){
    var childm = childms[k];
    if(childm.nodeName == nam && (childm.text).substring(0,6)==val){
    //alert(val);
    return child;
    }
    }
    }
    return ”;
    }
    //通过父节点和子节点名返回子节点值
    function getNodVal(nods,nam){
    var childms = nods.childNodes;
    for(var k=0;k<childms.length;k++){
    var childm = childms[k];
    if(childm.nodeName == nam){
    //alert(childm.text);
    return childm.text;
    }
    }
    return ”;
    }
    //通过父节点和子节点名返回子节点
    function getCurNod(nods,nam){
    var childms = nods.childNodes;
    for(var k=0;k<childms.length;k++){
    var childm = childms[k];
    if(childm.nodeName == nam){
    //alert(childm.text);
    return childm;
    }
    }
    return ”;
    }
    //开始查找
    function query(){
    var renum = /^\d{5}$/;
    if(renum.exec(xh.value)){
    if(xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”)){
    var nod = getNod(‘学号’,xh.value);
    //getNodVal(nod,’姓名’);
    //getNodVal(nod,’性别’);
    //getNodVal(nod,’籍贯’);
    /*document.getElementById(“xm”).value=xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/姓名”).text;
    document.getElementById(“xb”).value=xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/性别”).text;
    document.getElementById(“jg”).value=xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/籍贯”).text;
    document.getElementById(“xh”).disabled=”true”; */
    document.getElementById(“xm”).value=getNodVal(nod,’姓名’);
    document.getElementById(“xb”).value= getNodVal(nod,’性别’);
    document.getElementById(“jg”).value= getNodVal(nod,’籍贯’);
    }else{
    alert(“该学号还没有被占用!”);
    }
    }else{
    alert(“学号非法!学号5位数字!”);
    return false;
    }
    }
    //修改
    function mod(){
    if(info_check()){
    if(xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”)){
    if(confirm(“确认修改?”)){
    var nod = getNod(‘学号’,xh.value);
    getCurNod(nod,’姓名’).text=xm.value;
    getCurNod(nod,’性别’).text=xb.value;
    getCurNod(nod,’籍贯’).text=jg.value;
    /*
    xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/姓名”).text=xm.value;
    xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/性别”).text=xb.value;
    xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”).selectSingleNode(“学生/籍贯”).text=jg.value;
    */
    saveXML();
    //document.getElementById(“xh”).disabled=”false”;
    document.getElementById(“xh”).value=””;
    document.getElementById(“xm”).value=””;
    document.getElementById(“xb”).value=””;
    document.getElementById(“jg”).value=””;
    document.getElementById(“ad”).style.visibility=”hidden”;
    document.getElementById(“qmd”).style.visibility=”hidden”;
    alert(“修改成功!”);
    location.reload();
    }
    }else{
    alert(“该学号还没有被占用!请按学号查询再进行修改!”);
    return false;
    }
    }
    }
    //新增学生
    function add(){
    var vadd = document.getElementById(“add”).value;
    if(vadd==”新增”){
    document.getElementById(“xh”).value=””;
    document.getElementById(“xm”).value=””;
    document.getElementById(“xb”).value=””;
    document.getElementById(“jg”).value=””;
    document.getElementById(“qmd”).style.visibility=”hidden”;
    document.getElementById(‘info’).style.visibility=’hidden’;
    document.getElementById(“s”).value=”显示学生信息”;
    document.getElementById(“ad”).style.visibility=”visible”;
    document.getElementById(“add”).value=”保存”;
    document.getElementById(“can”).style.visibility=”visible”;
    }else{
    if(info_check()){
    add_node();
    saveXML();
    document.getElementById(“xh”).value=””;
    document.getElementById(“xm”).value=””;
    document.getElementById(“xb”).value=””;
    document.getElementById(“jg”).value=””;
    document.getElementById(“ad”).style.visibility=”hidden”;
    document.getElementById(“qmd”).style.visibility=”hidden”;
    document.getElementById(“add”).value=”新增”;
    alert(“新增成功!”);
    location.reload();
    }
    }
    }
    //删除学生
    function del(){
    var renum = /^\d{5}$/;
    if(renum.exec(document.getElementById(“xh”).value)){
    if(xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”)){
    if(confirm(“确认删除?”)){
    /*var node = xmlDoc.selectSingleNode(“/学生管理[学生/学号=”+xh.value+”]”);
    if(node.hasChildNodes()){
    var kids = node.childNodes;
    for(var i=0;i<kids.length;i++){
    del();
    }
    }
    node.parentNode.removeChild(node);
    */
    var nod = getNod(‘学号’,xh.value);
    nod.parentNode.removeChild(nod);
    saveXML();
    can();
    alert(“删除成功!”);
    location.reload();
    }
    }else{
    alert(“该学号还没有被占用!请按学号查询再进行修改!”);
    return false;
    }
    }else{
    alert(“学号非法!为5位数字!”);
    return false;
    }
    }
    //取消新增
    function can(){
    document.getElementById(“xh”).value=””;
    document.getElementById(“xm”).value=””;
    document.getElementById(“xb”).value=””;
    document.getElementById(“jg”).value=””;
    document.getElementById(“ad”).style.visibility=”hidden”;
    document.getElementById(“can”).style.visibility=”hidden”;
    document.getElementById(“qmd”).style.visibility=”hidden”;
    document.getElementById(“add”).value=”新增”;
    }
    //增加结点
    function add_node(){
    var oxh = xmlDoc.createElement(“学号”);
    oxh.appendChild(xmlDoc.createTextNode(xh.value));
    var oxm = xmlDoc.createElement(“姓名”);
    oxm.appendChild(xmlDoc.createTextNode(xm.value));
    var oxb = xmlDoc.createElement(“性别”);
    oxb.appendChild(xmlDoc.createTextNode(xb.value));
    var ojg = xmlDoc.createElement(“籍贯”);
    ojg.appendChild(xmlDoc.createTextNode(jg.value));
    var oxs = xmlDoc.createElement(“学生”);
    oxs.appendChild(oxh);
    oxs.appendChild(oxm);
    oxs.appendChild(oxb);
    oxs.appendChild(ojg);
    var parent = xmlDoc.selectSingleNode(“/学生管理”);
    if(parent.hasChildNodes()) {
    parent.insertBefore(oxs,parent.firstChild);
    }else{
    parent.appendChild(oxs);
    }
    }
    //保存XML
    function saveXML(){
    xmlDoc.save(“stu.xml”);
    }
    //验证新增数据
    function info_check(){
    var renum = /^\d{5}$/;
    var rec = /^[\u4E00-\u9FA5]{2,5}$/;
    if(!renum.exec(document.getElementById(“xh”).value)){
    alert(“学号非法!为5位数字!”);
    return false;
    }
    if(!rec.exec(xm.value)){
    alert(“姓名非法!只能是中文最少两个字,最多不得超过5个字!”);
    return false;
    }
    //alert(xb.value!=”男”);
    switch(xb.value){
    case “男”:break;
    case “女”:break;
    default:alert(“性别只能是\”男\”或\”女\”!”); return false;
    }
    if(!rec.exec(jg.value)){
    alert(“籍贯非法!只能是中文最少两个字,最多不得超过5个字!!”);
    return false;
    }
    return true;
    }
    //–>
    </SCRIPT>
    <input id=”s” type=button value=”显示学生信息” onclick=”show();”>
    <input id=”que” type=button value=”精确查询” onclick=”que();”>
    <input id=”add” type=button value=”新增” onclick=”add();”>
    <input id=”can” type=button value=”取消” onclick=”can();” style=”visibility:hidden”>
    <br>
    <center>
    <div id=”ad” style=”visibility:hidden”>
    <table><tr><td>学号:
    <input type=text id=”xh” style=”ime-mode:disabled” size=5 maxlength=5 onKeyPress=”if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false”><!– style 用于光闭输入法 onKeyPress 只能输入数字–>
    </td><td>姓名:
    <input type=text id=”xm” size=10 maxlength=5>
    </td><td>性别:
    <input type=text id=”xb” size=5 maxlength=5>
    </td><td>籍贯:
    <input type=text id=”jg” size=10 maxlength=5>
    </td>
    </tr>
    </table>
    </div>
    <div id=”qmd” style=”visibility:hidden”>
    <table>
    <tr align=”center”>
    <td></td>
    <td><input id=”que” type=button value=”查询” onclick=”query();”></td>
    <td><input id=”mod” type=button value=”修改” onclick=”mod();”></td>
    <td><input id=”del” type=button value=”删除” onclick=”del();”></td>
    </tr>
    </table>
    </div>
    </center>
    <div id=”findPanel”>
    <div id=”findPanelTitle”>可拖动</div>
    <div id=”findPanelContent”>
    <input type=”text” size=”20″ value=”a” id=”key” onkeydown=”javascript:ChckSubmit(event);”>
    <input type=”button” value=”查找” onclick=”javascript:OnKeySubmit();”>
    </div>
    </div>
    <script language=”javascript”>
    <!–
    var findPanel = document.getElementById(“findPanel”);
    var findPanelTitle = document.getElementById(“findPanelTitle”);
    var findPanelContent = document.getElementById(“findPanelContent”);
    var findPanel_orgnX = 50;
    var findPanel_orgnY = 50;
    //设置物件位置
    findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
    findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
    //================================================================================
    var foundCnt = 0; //已经找到了的结果的数量
    //查找入口函数
    function Find(key)
    {
    if (key == “”)
    {
    return;
    }
    if (document.all)
    {
    IEFind(key);
    }
    else
    {
    NSFind(key);
    }
    }
    //浏览器为 IE 系列
    function IEFind(key)
    {
    var rng = document.body.createTextRange();
    var found = false;
    for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++)
    {
    rng.moveStart(“character”, 1); //找到,后移一位以查找下一个
    }
    if (found)
    {
    rng.moveStart(“character”, -1);
    rng.findText(key);
    rng.select();
    rng.scrollIntoView();
    foundCnt++;
    }
    else
    {
    if (foundCnt > 0)
    {
    //已经查找一遍,找到有符合条件的结果,重新开始查找
    foundCnt = 0;
    IEFind(key);
    }
    else
    {
    //已经查找一遍,没有找到符合条件的结果
    alert(“文档搜索完毕。”);
    }
    }
    }
    //浏览器为 NS 系列
    function NSFind(key)
    {
    if (window.find(key))
    {
    foundCnt++;
    }
    else
    {
    var found = false;
    while (window.find(key, false, true))
    {
    found = true;
    }
    if (found)
    {
    //已经查找一遍,找到有符合条件的结果,重新查找也已经开始
    foundCnt = 1;
    }
    else
    {
    //已经查找一遍,没有找到符合条件的结果
    alert(“文档搜索完毕。”);
    }
    }
    }
    function OnKeySubmit()
    {
    var key = document.getElementById(“key”);
    Find(key.value);
    }
    function ChckSubmit(e)
    {
    if (e.keyCode == 13)
    {
    OnKeySubmit();
    }
    }
    //================================================================================
    function RePosFindPanel()
    {
    findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;
    findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;
    }
    document.body.onscroll = RePosFindPanel;
    document.body.onresize = RePosFindPanel;
    //================================================================================
    //拖拽过程中相关变量
    var draging = false; //是否处于拖拽中
    var offsetX = 0; //X方向左右偏移量
    var offsetY = 0; //Y方向上下偏移量
    //准备拖拽
    function BeforeDrag()
    {
    if (event.button != 1)
    {
    return;
    }
    offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft;
    offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop;
    draging = true;
    }
    //拖拽中
    function OnDrag()
    {
    if(!draging)
    {
    return;
    }
    //更新位置
    findPanel_orgnX = event.clientX-offsetX;
    findPanel_orgnY = event.clientY-offsetY;
    event.returnValue = false;
    findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;
    findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;
    }
    //结束拖拽
    function EndDrag()
    {
    if (event.button != 1)
    {
    return;
    }
    draging = false;
    }
    findPanelTitle.onmousedown = BeforeDrag;
    document.onmousemove = OnDrag;
    findPanelTitle.onmouseup = EndDrag;
    //–>
    </script>
    <xml id=”stu” src=”stu.xml”>
    </xml>
    <center>
    <div id=”info” style=”visibility:hidden”>
    <table DATASRC=#stu border=1 style=”background-color:#a9eeef; Border-color
    :red;” >
    <caption><h2>学生信息管理</h2></caption>
    <thead> 
    <th>学号</th>
    <th>姓名</th>  
    <th>性别</th>  
    <th>籍贯</th> 
    </thead> 
    <tr> 
    <td>  
    <div DATAFLD=”学号”>  
    </td>  
    <td>  
    <div DATAFLD=”姓名”>
    </td>  
    <td>  
    <div DATAFLD=”性别”>  
    </td>  
    <td>  
    <div DATAFLD=”籍贯”> 
    </td> 
    </tr> 
    </table>
    </div>
    </center>
    </body>
    </html>


    xml文件如下(stu.xml)

    复制代码 代码如下:

    <?xml version=”1.0″ encoding=”gb2312″?>
    <学生管理>
    <学生>
     <学号>97001</学号>
     <姓名>王五</姓名>
     <性别>男 </性别>
     <籍贯>上海</籍贯>
    </学生>
    <学生>
     <学号>97002</学号>
     <姓名>李四 </姓名>
     <性别>男 </性别>
     <籍贯>浙江 </籍贯>
    </学生>
    <学生>
      <学号>97006 </学号>
      <姓名>张三 </姓名>
      <性别>男</性别>
      <籍贯>浙江</籍贯>
    </学生>
    </学生管理>

Leave a Reply

Leave a Reply