zoukankan      html  css  js  c++  java

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

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

    文件stu.hta代码如下:

    代码 
    <html>
    <head>
    <title> 数据岛的显示　</title>
    <style type="text/css">
    #findPanel
    {
        position:absolute;
        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    </学号>
    　     <姓名>张三 </姓名>
    　     <性别>男</性别>
    　     <籍贯>浙江</籍贯>
         </学生>
    </学生管理>
  • 相关阅读:
    oracle 口令过期 解决
    powerdesginer script 脚本，生成数据模型
    ntp时间同步
    CentOS下安装JDK的三种方法
    linux安装jdk
    YUM仓库配置
    Shell编程
    RPM
    常用基本命令十二(crond系统定时任务)
    常用基本命令十一(后台服务管理)
  • 原文地址：https://www.cnblogs.com/strivers/p/1898897.html
Copyright © 2011-2022 走看看