首页 / JAVASCRIPT / javascript操作xml(增删改查)例子代码

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript操作xml(增删改查)例子代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含25910字，纯文字阅读大概需要38分钟。

内容图文

包括了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">
<!--

/**
* 解析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);

if(!rec.exec(jg.value)){
alert("籍贯非法!只能是中文最少两个字,最多不得超过5个字!！");
return false;
}
return true;
}

//-->
</SCRIPT>

<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">
</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);
}

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>

<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=" 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 </学号>
　 <姓名>张三 </姓名>
　 <性别>男</性别>
　 <籍贯>浙江</籍贯>
</学生>
</学生管理>

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

原文：http://www.cnblogs.com/lschenblog/p/3990009.html

内容总结

以上是互联网集市为您收集整理的javascript操作xml(增删改查)例子代码全部内容，希望文章能够帮你解决javascript操作xml(增删改查)例子代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1312449.html

来源：【匿名】

首页 / JAVASCRIPT / javascript操作xml(增删改查)例子代码

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript操作xml(增删改查)例子代码】教程文章相关的互联网学习教程文章

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

JavaScript操作XML(二)【代码】

JS操作XML中DTD介绍及使用方法分析【图】

js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)_javascript技巧【图】

XmlUtilsJS操作XML工具类_javascript技巧

JavaScript操作XML实例代码（获取新闻标题并分页，并分页）_javascript技巧

JavaScript操作XML使用百度RSS作为新闻源示例_javascript技巧【图】

JavaScript操作XML/HTML比较常用的对象属性集锦_javascript技巧

JS操作XML实例总结(加载与解析XML文件、字符串)_javascript技巧

js操作XML文件的实现方法兼容IE与FireFox

JS操作XML实例总结(加载与解析XML文件、字符串)

JavaScript操作XML/HTML比较常用的对象属性集锦

JavaScript操作XML文件之XML读取方法

JavaScript操作XML 使用百度RSS作为新闻源示例

JavaScript操作XML实例代码（获取新闻标题并分页，并分页）

代码 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程