`
guohf
  • 浏览: 419253 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

XMLJavaScriptIE浏览器CSS 
阅读更多

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

 

分享到：
| JS操作XML
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AJAX初学者入门源码，单表增删改查例子，适合初学者

    总结：AJAX技术为Web开发提供了强大的功能，通过理解和实践，初学者可以逐步掌握如何利用AJAX实现实时、无刷新的交互体验，特别是单表增删改查这样的常见业务场景。提供的源码实例是一个很好的起点，通过深入研究和...

    jquery easy ui+ssh 增删改查例子

    这里，我们深入探讨一下使用jQuery EasyUI与SSH框架进行数据操作（增删改查）的基础知识。 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列轻量级、易于使用的组件，如表格、对话框、菜单等，用于构建富...

    XML.rar_crud_javascript_javascript xml_xml_增删改查英文

    在这个“XML.rar”压缩包中，我们重点关注的是使用JavaScript来操作XML，实现数据的增删改查，并且支持中英文切换的功能。 在JavaScript中处理XML，首先我们需要了解XML DOM（Document Object Model）。DOM是一种...

    EasyUi框架，增删改查例子（保证完整）

    这个"EasyUi框架，增删改查例子（保证完整）"是一个完整的示例项目，旨在帮助开发者快速理解和应用EasyUi进行数据管理操作，如添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 首先，让我们详细了解...

    ajax增删改查的例子

    这个"ajax增删改查的例子"是一个很好的实践教程，可以帮助开发者深入理解如何在实际项目中运用AJAX进行数据操作。 首先，让我们来看看"用户名验证"这一部分。在用户注册或登录时，实时验证用户名的可用性是常见的...

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

    本篇文章主要介绍了在HTA环境中，如何使用JavaScript进行XML文件的增删改查操作。首先，文章指出在进行这些操作时，需要将HTML代码保存为hta后缀，否则在尝试对XML文件进行操作时会出现权限不足的提示。接着，文章...

    mvc增删改查

    本篇文章将深入探讨基于EasyUI的MVC版增删改查操作，并结合AJAX技术来阐述其实现方式。 **一、MVC模式详解** 1. **模型（Model）**：模型层负责处理业务逻辑和数据处理。在这个例子中，它可能包括对数据库的操作，...

    ssh的简单增删改查

    这个“ssh的简单增删改查”示例旨在演示如何在Web应用中利用SSH框架进行基本的数据操作。在这个小例子中，我们将探讨SSH框架的核心概念以及如何通过Ajax技术实现异步的删除操作。 1. **Struts**：Struts是一个MVC...

    jqGrid增删改查例子

    这个"jqGrid增删改查例子"是一个实际应用示例，展示了如何结合Struts2框架和MySQL数据库实现一个完整的CRUD（创建、读取、更新、删除）功能的前端表格。 首先，让我们了解一下jqGrid的核心功能： 1. 数据展示：...

    AJAX-dwr实现增删改查的示例代码

    在"AJAX-dwr实现增删改查的示例代码"中，DWR被用来构建一个简单的CRUD（Create, Read, Update, Delete）应用程序。这个示例主要帮助开发者了解如何在实际项目中运用DWR来处理页面的交互和数据操作。由于此示例不依赖...

    struts1.2+ibatis+DWR2.0+MySql5.0增删改查的小例子

    这个小例子展示了如何将这些技术整合在一起，实现一个基本的增删改查功能。下面我们将详细探讨这四个技术以及它们在实际应用中的工作原理。 **Struts1.2** 是一款基于MVC设计模式的Java Web框架，主要负责控制层的...

    dwr增删改查

    这个"**dwr增删改查**"的例子，正如标题和描述所提及，是一个非常基础且实用的教程，特别适合初学者了解和掌握DWR的基本用法，包括如何进行数据的添加、删除、修改和查询操作。 DWR的核心功能在于提供了一种方式，...

    SSH2 + JQuery EasyUI 做的一个对书籍增删改查的例子

    JQuery EasyUI 做的一个对书籍增删改查的例子”表明这是一个使用Struts2（SSH框架的一部分）、Spring和Hibernate（SSH框架的另外两个部分）结合JQuery EasyUI创建的Web应用程序示例，主要用于图书管理系统的CRUD...

    html只在前端原生增删改查HTML.zip

    在这个"html只在前端原生增删改查HTML.zip"压缩包中，我们看到的是一个使用纯HTML和JavaScript实现的前端数据管理示例。这个示例可能包含了以下几个关键知识点： 1. **HTML表单**：HTML中的`&lt;form&gt;`元素用于创建...

    SSH2 整合简单增删改查实例，仅供学习使用

    在SSH2整合的示例中，Ajax可能被用来实现页面无刷新的增删改查操作，提升用户体验。 7. **SQL**：SQL（Structured Query Language）是用于管理关系数据库的标准语言。在这个实例中，开发者会编写SQL语句来创建、...

    一个页面实现Ajax效果的增删改查-JQuery

    在网页开发中，Ajax（Asynchronous JavaScript and XML）与jQuery的结合使用，极大地提升了用户体验，实现了页面无需刷新即可完成数据的增删改查操作。这个主题"一个页面实现Ajax效果的增删改查-JQuery"深入浅出地...

    SSM+Maven+ExtJs 在eclipse中实现的增删改查例子

    这个例子是一个在Eclipse环境中实现的增删改查（CRUD）应用，它结合了Spring、Spring MVC（Spring Web MVC）、MyBatis（原称SSM）以及前端的ExtJs框架。下面将详细介绍这些知识点： 1. **Spring**：Spring是Java...

    用mvc实现增删改查，连数据库的

    在本案例中，Model组件将包含数据库连接代码，执行SQL语句以完成增删改查操作。 2. **View（视图）**：负责显示数据，通常为用户界面。在 MVC 架构中，视图不直接与模型交互，而是通过控制器获取更新后的数据，并...

    ssh实现增删查改的例子

    在这个“ssh实现增删查改的例子”项目中，我们将探讨SSH框架如何协同工作，实现对MySQL数据库的数据操作。 首先，Struts2作为MVC框架，主要负责处理用户的HTTP请求。它通过Action类和ActionMapping将用户请求映射到...

    SSH+ExtJs实现表单的增删改查CRUD

    总结来说，SSH+ExtJS实现的CRUD系统结合了Java后端的高效处理能力和JavaScript前端的用户体验优化，通过JSON进行数据交换，实现了对数据库中如“Student”这样的记录进行增、删、改、查的功能。这样的系统设计灵活且...

Magicbox
Global site tag (gtag.js) - Google Analytics