现在的位置: 首页 > 综合 > 正文

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

2012年10月10日 ⁄ 综合 ⁄ 共 7992字 ⁄ 字号 小 中 大 ⁄ 评论关闭

包括了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
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）