程序博客网 > pcb激光钻孔机编程

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

来源：互联网 发布：pcb激光钻孔机编程 编辑：程序博客网 时间：2024/05/08 04:05

自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!

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

文件stu.hta代码如下:

Java代码 复制代码
  1. <html>   
  2. <head>   
  3. <title> 数据岛的显示　</title>   
  4. <style type="text/css">   
  5. #findPanel   
  6. {   
  7.     position:absolute;   
  8.     width:220px;   
  9.     border:1px solid #666666;   
  10. }   
  11.   
  12. #findPanelTitle   
  13. {   
  14.     height:10px;   
  15.     background-color:#336699;   
  16.     cursor:move;   
  17. }   
  18.   
  19. #findPanelContent   
  20. {   
  21.     padding:5px 5px 5px 5px;   
  22.     background-color:#6699CC;   
  23. }   
  24. </style>   
  25.   
  26. </head>   
  27. <body>   
  28. <SCRIPT LANGUAGE="JavaScript">   
  29. <!--   
  30.   
  31.     var   xmlDoc   =   new   ActiveXObject("Msxml2.DOMDocument");      
  32.     xmlDoc.async   =   false;      
  33.     xmlDoc.resolveExternals   =   false;      
  34.     xmlDoc.load("stu.xml");   
  35.     //alert(xmlDoc.xml);   
  36.     //显示数据   
  37.     function show(){   
  38.         var vbo = document.getElementById("s").value;   
  39.         if(vbo=="显示学生信息"){   
  40.            document.getElementById('info').style.visibility='visible';   
  41.            document.getElementById("s").value="隐藏学生信息";   
  42.          }else{   
  43.             document.getElementById('info').style.visibility='hidden';   
  44.             document.getElementById("s").value="显示学生信息";   
  45.          }   
  46.     }   
  47.     //查找   
  48.     function que(){   
  49.        document.getElementById("ad").style.visibility="visible";   
  50.        document.getElementById("qmd").style.visibility="visible";   
  51.      }   
  52.   
  53.      /**  
  54.       * 解析XML文件函数  
  55.       * @param xmlDoc XML对象  
  56.       * @param name 属性名称 格式如:user.name  
  57.       */  
  58.     function getXMLProperty(xmlDoc, name) {   
  59.      var keys = name.split('.');   
  60.      var node = xmlDoc.documentElement;   
  61.      for(var i=0; i<keys.length; i++) {   
  62.       var childs = node.childNodes;   
  63.       var key = keys[i];   
  64.       for(var k=0; k<childs.length; k++) {   
  65.         var child = childs[k];   
  66.         if(child.nodeName == key) {   
  67.           if(child.childNodes.length == 1) {   
  68.            return child.text;   
  69.            } else {   
  70.             node = child;   
  71.             break;   
  72.            }   
  73.        }   
  74.      }   
  75.    }   
  76.    return "";   
  77.   }   
  78.   //返回父节点(通过节点名字和节点值)   
  79.    function getNod(nam,val){   
  80.       var node = xmlDoc.documentElement;   
  81.       var childs = node.childNodes;      
  82.       for (var i=0;i<childs.length ;i++ )   
  83.       {   
  84.        var child = childs[i];   
  85.        var childms = child.childNodes;   
  86.        for(var k=0;k<childms.length;k++){   
  87.        var childm = childms[k];   
  88.         if(childm.nodeName == nam && (childm.text).substring(0,6)==val){   
  89.          //alert(val);   
  90.          return child;   
  91.         }   
  92.        }   
  93.       }   
  94.       return '';   
  95.    }   
  96.    //通过父节点和子节点名返回子节点值   
  97.    function getNodVal(nods,nam){   
  98.        var childms = nods.childNodes;   
  99.        for(var k=0;k<childms.length;k++){   
  100.        var childm = childms[k];   
  101.         if(childm.nodeName == nam){   
  102.          //alert(childm.text);   
  103.          return childm.text;   
  104.         }   
  105.        }   
  106.          
  107.       return '';   
  108.    }   
  109.    //通过父节点和子节点名返回子节点   
  110.    function getCurNod(nods,nam){   
  111.        var childms = nods.childNodes;   
  112.        for(var k=0;k<childms.length;k++){   
  113.        var childm = childms[k];   
  114.         if(childm.nodeName == nam){   
  115.          //alert(childm.text);   
  116.          return childm;   
  117.         }   
  118.        }   
  119.          
  120.       return '';   
  121.    }   
  122.   
  123.     //开始查找   
  124.     function  query(){   
  125.        var renum = /^/d{5}$/;   
  126.        if(renum.exec(xh.value)){   
  127.        if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  128.              var nod = getNod('学号',xh.value);   
  129.              //getNodVal(nod,'姓名');   
  130.              //getNodVal(nod,'性别');   
  131.              //getNodVal(nod,'籍贯');   
  132.            /*document.getElementById("xm").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text;  
  133.            document.getElementById("xb").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text;  
  134.            document.getElementById("jg").value=xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text;  
  135.            document.getElementById("xh").disabled="true";   */  
  136.            document.getElementById("xm").value=getNodVal(nod,'姓名');   
  137.            document.getElementById("xb").value= getNodVal(nod,'性别');   
  138.            document.getElementById("jg").value= getNodVal(nod,'籍贯');   
  139.          }else{   
  140.           alert("该学号还没有被占用!");   
  141.          }   
  142.        }else{   
  143.         alert("学号非法!学号5位数字!");   
  144.         return false;   
  145.        }   
  146.     }   
  147.     //修改   
  148.     function mod(){     
  149.         if(info_check()){   
  150.           if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  151.             if(confirm("确认修改？")){   
  152.               var nod = getNod('学号',xh.value);   
  153.               getCurNod(nod,'姓名').text=xm.value;   
  154.               getCurNod(nod,'性别').text=xb.value;   
  155.               getCurNod(nod,'籍贯').text=jg.value;   
  156.               /*  
  157.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/姓名").text=xm.value;  
  158.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/性别").text=xb.value;  
  159.               xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]").selectSingleNode("学生/籍贯").text=jg.value;  
  160.               */  
  161.               saveXML();   
  162.               //document.getElementById("xh").disabled="false";   
  163.               document.getElementById("xh").value="";   
  164.               document.getElementById("xm").value="";   
  165.               document.getElementById("xb").value="";   
  166.               document.getElementById("jg").value="";   
  167.               document.getElementById("ad").style.visibility="hidden";   
  168.               document.getElementById("qmd").style.visibility="hidden";   
  169.               alert("修改成功!");   
  170.               location.reload();   
  171.             }   
  172.           }else{   
  173.             alert("该学号还没有被占用!请按学号查询再进行修改!");   
  174.             return false;   
  175.           }   
  176.         }   
  177.     }   
  178.     //新增学生   
  179.     function add(){   
  180.         var  vadd = document.getElementById("add").value;   
  181.         if(vadd=="新增"){   
  182.            document.getElementById("xh").value="";   
  183.            document.getElementById("xm").value="";   
  184.            document.getElementById("xb").value="";   
  185.            document.getElementById("jg").value="";   
  186.            document.getElementById("qmd").style.visibility="hidden";   
  187.            document.getElementById('info').style.visibility='hidden';   
  188.            document.getElementById("s").value="显示学生信息";   
  189.            document.getElementById("ad").style.visibility="visible";   
  190.            document.getElementById("add").value="保存";   
  191.            document.getElementById("can").style.visibility="visible";   
  192.         }else{   
  193.            if(info_check()){   
  194.            add_node();   
  195.            saveXML();   
  196.            document.getElementById("xh").value="";   
  197.            document.getElementById("xm").value="";   
  198.            document.getElementById("xb").value="";   
  199.            document.getElementById("jg").value="";   
  200.            document.getElementById("ad").style.visibility="hidden";   
  201.            document.getElementById("qmd").style.visibility="hidden";   
  202.            document.getElementById("add").value="新增";   
  203.            alert("新增成功!");   
  204.            location.reload();   
  205.            }   
  206.         }   
  207.     }   
  208.        
  209.     //删除学生   
  210.     function del(){   
  211.        var renum = /^/d{5}$/;   
  212.        if(renum.exec(document.getElementById("xh").value)){   
  213.         if(xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]")){   
  214.           if(confirm("确认删除？")){   
  215.             /*var node = xmlDoc.selectSingleNode("/学生管理[学生/学号="+xh.value+"]");  
  216.             if(node.hasChildNodes()){               
  217.              var kids = node.childNodes;                 
  218.             for(var i=0;i<kids.length;i++){                         
  219.                 del();     
  220.               }     
  221.             }  
  222.              node.parentNode.removeChild(node);  
  223.              */  
  224.               var nod = getNod('学号',xh.value);   
  225.               nod.parentNode.removeChild(nod);   
  226.   
  227.              saveXML();   
  228.              can();   
  229.              alert("删除成功!");   
  230.              location.reload();   
  231.              }   
  232.         }else{   
  233.             alert("该学号还没有被占用!请按学号查询再进行修改!");   
  234.             return false;   
  235.         }   
  236.       }else{   
  237.         alert("学号非法!为5位数字!");   
  238.         return false;   
  239.       }   
  240.     }   
  241.   
  242.   
  243.     //取消新增   
  244.     function can(){   
  245.        document.getElementById("xh").value="";   
  246.        document.getElementById("xm").value="";   
  247.        document.getElementById("xb").value="";   
  248.        document.getElementById("jg").value="";   
  249.        document.getElementById("ad").style.visibility="hidden";   
  250.        document.getElementById("can").style.visibility="hidden";   
  251.        document.getElementById("qmd").style.visibility="hidden";   
  252.        document.getElementById("add").value="新增";   
  253.     }   
  254.     //增加结点   
  255.     function add_node(){   
  256.         var  oxh = xmlDoc.createElement("学号");   
  257.         oxh.appendChild(xmlDoc.createTextNode(xh.value));   
  258.         var  oxm = xmlDoc.createElement("姓名");   
  259.         oxm.appendChild(xmlDoc.createTextNode(xm.value));   
  260.         var  oxb = xmlDoc.createElement("性别");   
  261.         oxb.appendChild(xmlDoc.createTextNode(xb.value));   
  262.         var  ojg = xmlDoc.createElement("籍贯");   
  263.         ojg.appendChild(xmlDoc.createTextNode(jg.value));   
  264.   
  265.         var oxs = xmlDoc.createElement("学生");   
  266.         oxs.appendChild(oxh);   
  267.         oxs.appendChild(oxm);   
  268.         oxs.appendChild(oxb);   
  269.         oxs.appendChild(ojg);   
  270.   
  271.         var parent = xmlDoc.selectSingleNode("/学生管理");   
  272.         if(parent.hasChildNodes())   {      
  273.            parent.insertBefore(oxs,parent.firstChild);      
  274.           }else{      
  275.            parent.appendChild(oxs);      
  276.           }    
  277.     }   
  278.     //保存XML   
  279.     function saveXML(){   
  280.         xmlDoc.save("stu.xml");   
  281.     }   
  282.     //验证新增数据   
  283.     function info_check(){   
  284.       var renum = /^/d{5}$/;   
  285.       var rec = /^[/u4E00-/u9FA5]{2,5}$/;   
  286.       if(!renum.exec(document.getElementById("xh").value)){   
  287.         alert("学号非法!为5位数字!");   
  288.         return false;   
  289.        }   
  290.       if(!rec.exec(xm.value)){   
  291.         alert("姓名非法!只能是中文最少两个字,最多不得超过5个字!");   
  292.         return false;   
  293.       }   
  294.       //alert(xb.value!="男");   
  295.       switch(xb.value){   
  296.        case "男":break;   
  297.        case "女":break;   
  298.        default:alert("性别只能是/"男/"或/"女/"!"); return false;   
  299.       }   
  300.   
  301.   
  302.       if(!rec.exec(jg.value)){   
  303.         alert("籍贯非法!只能是中文最少两个字,最多不得超过5个字!！");   
  304.         return false;   
  305.       }   
  306.       return true;   
  307.     }   
  308.        
  309. //-->   
  310. </SCRIPT>   
  311.   
  312. <input id="s" type=button value="显示学生信息" onclick="show();">   
  313. <input id="que" type=button value="精确查询" onclick="que();">   
  314. <input id="add" type=button value="新增" onclick="add();">   
  315. <input id="can" type=button value="取消" onclick="can();" style="visibility:hidden">   
  316.   
  317. <br>   
  318. <center>   
  319. <div id="ad" style="visibility:hidden">   
  320.   <table><tr><td>学号:   
  321.   <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 只能输入数字-->   
  322.   </td><td>姓名:   
  323.   <input type=text id="xm" size=10 maxlength=5>   
  324.   </td><td>性别:   
  325.   <input type=text id="xb" size=5 maxlength=5>   
  326.   </td><td>籍贯:   
  327.   <input type=text id="jg" size=10 maxlength=5>   
  328.   </td>   
  329.   </tr>   
  330.   </table>   
  331. </div>   
  332. <div id="qmd" style="visibility:hidden">   
  333.   <table>   
  334.   <tr align="center">     
  335.   <td></td>   
  336.   <td><input id="que" type=button value="查询" onclick="query();"></td>   
  337.   <td><input id="mod" type=button value="修改" onclick="mod();"></td>   
  338.   <td><input id="del" type=button value="删除" onclick="del();"></td>      
  339.   </tr>   
  340.   </table>   
  341. </div>   
  342. </center>   
  343. <div id="findPanel">   
  344.   <div id="findPanelTitle">可拖动</div>   
  345.   <div id="findPanelContent">   
  346.     <input type="text" size="20" value="a" id="key" onkeydown="javascript:ChckSubmit(event);">   
  347.     <input type="button" value="查找" onclick="javascript:OnKeySubmit();">   
  348.   </div>   
  349. </div>   
  350. <script language="javascript">   
  351. <!--   
  352. var findPanel = document.getElementById("findPanel");   
  353. var findPanelTitle = document.getElementById("findPanelTitle");   
  354. var findPanelContent = document.getElementById("findPanelContent");   
  355. var findPanel_orgnX = 50;   
  356. var findPanel_orgnY = 50;   
  357.   
  358. //设置物件位置   
  359. findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;   
  360. findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;   
  361. //================================================================================   
  362. var foundCnt = 0; //已经找到了的结果的数量   
  363.   
  364. //查找入口函数   
  365. function Find(key)   
  366. {   
  367.     if (key == "")   
  368.     {   
  369.         return;   
  370.     }   
  371.        
  372.     if (document.all)   
  373.     {   
  374.         IEFind(key);   
  375.     }   
  376.     else  
  377.     {   
  378.         NSFind(key);   
  379.     }   
  380. }   
  381.   
  382. //浏览器为 IE 系列   
  383. function IEFind(key)   
  384. {   
  385.     var rng = document.body.createTextRange();   
  386.     var found = false;   
  387.     for (var i=0; i<=foundCnt && (found=rng.findText(key)); i++)   
  388.     {   
  389.         rng.moveStart("character", 1); //找到，后移一位以查找下一个   
  390.     }   
  391.        
  392.     if (found)   
  393.     {   
  394.          rng.moveStart("character", -1);   
  395.          rng.findText(key);   
  396.          rng.select();   
  397.          rng.scrollIntoView();   
  398.          foundCnt++;   
  399.     }   
  400.     else  
  401.     {   
  402.         if (foundCnt > 0)   
  403.         {   
  404.             //已经查找一遍，找到有符合条件的结果，重新开始查找   
  405.             foundCnt = 0;   
  406.             IEFind(key);   
  407.         }   
  408.         else  
  409.         {   
  410.             //已经查找一遍，没有找到符合条件的结果   
  411.             alert("文档搜索完毕。");   
  412.         }   
  413.     }   
  414. }   
  415.   
  416. //浏览器为 NS 系列   
  417. function NSFind(key)   
  418. {   
  419.     if (window.find(key))   
  420.     {   
  421.         foundCnt++;   
  422.     }   
  423.     else  
  424.     {   
  425.         var found = false;   
  426.         while (window.find(key, false, true))   
  427.         {   
  428.             found = true;   
  429.         }   
  430.            
  431.         if (found)   
  432.         {   
  433.             //已经查找一遍，找到有符合条件的结果，重新查找也已经开始   
  434.             foundCnt = 1;   
  435.         }   
  436.         else  
  437.         {   
  438.             //已经查找一遍，没有找到符合条件的结果   
  439.             alert("文档搜索完毕。");   
  440.         }   
  441.     }   
  442. }       
  443.   
  444. function OnKeySubmit()   
  445. {   
  446.     var key = document.getElementById("key");   
  447.     Find(key.value);   
  448. }   
  449.   
  450. function ChckSubmit(e)   
  451. {   
  452.     if (e.keyCode == 13)   
  453.     {   
  454.         OnKeySubmit();   
  455.     }   
  456. }   
  457. //================================================================================   
  458. function RePosFindPanel()   
  459. {   
  460.     findPanel.style.pixelLeft = document.body.scrollLeft + findPanel_orgnX;   
  461.     findPanel.style.pixelTop = document.body.scrollTop + findPanel_orgnY;   
  462. }   
  463.   
  464. document.body.onscroll = RePosFindPanel;   
  465. document.body.onresize = RePosFindPanel;   
  466. //================================================================================   
  467. //拖拽过程中相关变量   
  468. var draging = false; //是否处于拖拽中   
  469. var offsetX = 0;     //X方向左右偏移量   
  470. var offsetY = 0;     //Y方向上下偏移量   
  471.   
  472. //准备拖拽   
  473. function BeforeDrag()   
  474. {   
  475.     if (event.button != 1)   
  476.     {   
  477.         return;   
  478.     }   
  479.     offsetX = document.body.scrollLeft + event.clientX-findPanel.style.pixelLeft;   
  480.     offsetY = document.body.scrollTop + event.clientY-findPanel.style.pixelTop;   
  481.     draging = true;   
  482. }   
  483.   
  484. //拖拽中   
  485. function OnDrag()   
  486. {   
  487.     if(!draging)   
  488.     {   
  489.         return;   
  490.     }   
  491.     //更新位置   
  492.     findPanel_orgnX = event.clientX-offsetX;   
  493.     findPanel_orgnY = event.clientY-offsetY;   
  494.     event.returnValue = false;   
  495.     findPanel.style.pixelLeft = document.body.scrollLeft + event.clientX-offsetX;   
  496.     findPanel.style.pixelTop = document.body.scrollTop + event.clientY-offsetY;   
  497. }   
  498.   
  499. //结束拖拽   
  500. function EndDrag()   
  501. {   
  502.     if (event.button != 1)   
  503.     {   
  504.         return;   
  505.     }   
  506.     draging = false;   
  507. }   
  508.   
  509. findPanelTitle.onmousedown = BeforeDrag;   
  510. document.onmousemove = OnDrag;   
  511. findPanelTitle.onmouseup = EndDrag;   
  512. //-->   
  513. </script>   
  514. <xml id="stu" src="stu.xml">   
  515. </xml>   
  516. <center>   
  517. <div id="info" style="visibility:hidden">   
  518. <table  DATASRC=#stu border=1 style="background-color:#a9eeef; Border-color   
  519. :red;" >   
  520. <caption><h2>学生信息管理</h2></caption>   
  521. <thead>　   
  522. <th>学号</th>   
  523. <th>姓名</th>　　   
  524. <th>性别</th>　　   
  525. <th>籍贯</th>　   
  526. </thead>　   
  527. <tr>　   
  528. <td>　　   
  529. <div DATAFLD="学号">　　   
  530. </td>　　   
  531. <td>　　   
  532. <div DATAFLD="姓名">   
  533. </td>　　   
  534. <td>　　   
  535. <div DATAFLD="性别">　　   
  536. </td>　　   
  537. <td>　　   
  538. <div DATAFLD="籍贯">　   
  539. </td>　   
  540. </tr>　   
  541. </table>   
  542. </div>   
  543.   
  544.   
  545. </center>   
  546. </body>   
  547. </html>  


xml文件如下(stu.xml)

Java代码 复制代码
  1. <?xml version="1.0" encoding="gb2312"?>   
  2. <学生管理>   
  3.  <学生>              
  4. 　<学号>97001</学号>   
  5. 　<姓名>王五</姓名>   
  6. 　<性别>男   </性别>   
  7. 　<籍贯>上海</籍贯>   
  8.  </学生>   
  9.  <学生>              
  10. 　<学号>97002</学号>   
  11. 　<姓名>李四 </姓名>   
  12. 　<性别>男   </性别>   
  13. 　<籍贯>浙江 </籍贯>   
  14.  </学生>   
  15.  <学生>               
  16. 　 <学号>97006    </学号>   
  17. 　 <姓名>张三 </姓名>   
  18. 　 <性别>男</性别>   
  19. 　 <籍贯>浙江</籍贯>   
  20.  </学生>   
  21. </学生管理>  
pcb激光钻孔机编程 pcb激光钻孔机编程
原创粉丝点击
热门IT博客
蜂蜜源码蜂蜜源码
魔兽插件mac版魔兽插件mac版
js 数组重复元素
数据统计如何提高效率
手机淘宝店的店招尺寸
舞台剧网络营销策划书
linux ssh是否安装
国外高匿代理ip和端口
sql随机生成6位数字
上瘾网络剧被删镜头
网络教育档案放在哪里
如何查看电脑的mac地址
做销售数据系统的软件
淘宝一口价怎么选择
明星没文化知乎
python脚本怎么写
笔记本摄像头录像软件
最强手机象棋软件
端口监听命令
淘宝宝贝尺码怎么编辑
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 急性颌骨骨髓炎 颌骨骨折症状 颌骨骨折的复位标准 下颌骨矫正 下颌角突出 下颚骨整形多少钱 下颌骨肥大 下颌骨整容 下颌骨后缩 下颌骨是哪里 颌面部骨巨细胞瘤 下颌骨前突 下颚角削骨 上颌前部截骨术 下颚骨截骨 下颌骨截骨 下颌骨后缩矫正地包天 下颌骨截骨术 磨下颌骨和颧骨 鼻梁骨骨折算什么伤 小狗疑被砍掉下颌骨 颍 颍怎么读 颍上 颍上教育资源网 颍上熊德超判刑 颍上论坛 颍上教育信息网 颍上邮编 颍上吧 颍上姚民 颍上一中校长儿子被杀 颍上高铁 颍上高铁站 颍上火车站 颍上北站 颍上一中 合肥到颍上的物流 颍上物流公司 颖上论坛 颖上

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里