- 浏览: 89350 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
kuge6688:
我的中文还不显示啊。。。。。。。。。。。。。。。求
Itext中文处理pdf(转) -
xmllong:
奇怪,第一个代码例子就不行,只输出start ok,中间的中文 ...
Itext中文处理pdf(转) -
byandby:
Class类有一个forName()静态方法,可以根据传入的类 ...
Java中的Class对象 -
xiaoyuqi00:
c:/aoke_temp/userInfo2009070710 ...
用jspsmartupload下载文件 -
wsbwindy:
good
怎样用JspSmartUpload实现文件上传攻略
javascript操作xml(增删改查)例子代码
关键字: javascript操作xml(增删改查)
自己做了一个小东西,不是很好,但是对初学来说是一个不错的例子!
包括了stu.hta (是HTML应用程序 );
stu.xml
注意下面的HTML代码必须保存为后缀名为hta 否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!
文件stu.hta 代码如下:
包括了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= "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
相关推荐
总结:AJAX技术为Web开发提供了强大的功能,通过理解和实践,初学者可以逐步掌握如何利用AJAX实现实时、无刷新的交互体验,特别是单表增删改查这样的常见业务场景。提供的源码实例是一个很好的起点,通过深入研究和...
这里,我们深入探讨一下使用jQuery EasyUI与SSH框架进行数据操作(增删改查)的基础知识。 jQuery EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的组件,如表格、对话框、菜单等,用于构建富...
在这个“XML.rar”压缩包中,我们重点关注的是使用JavaScript来操作XML,实现数据的增删改查,并且支持中英文切换的功能。 在JavaScript中处理XML,首先我们需要了解XML DOM(Document Object Model)。DOM是一种...
这个"EasyUi框架,增删改查例子(保证完整)"是一个完整的示例项目,旨在帮助开发者快速理解和应用EasyUi进行数据管理操作,如添加(Add)、删除(Delete)、修改(Update)和查询(Query)。 首先,让我们详细了解...
这个"ajax增删改查的例子"是一个很好的实践教程,可以帮助开发者深入理解如何在实际项目中运用AJAX进行数据操作。 首先,让我们来看看"用户名验证"这一部分。在用户注册或登录时,实时验证用户名的可用性是常见的...
本篇文章主要介绍了在HTA环境中,如何使用JavaScript进行XML文件的增删改查操作。首先,文章指出在进行这些操作时,需要将HTML代码保存为hta后缀,否则在尝试对XML文件进行操作时会出现权限不足的提示。接着,文章...
本篇文章将深入探讨基于EasyUI的MVC版增删改查操作,并结合AJAX技术来阐述其实现方式。 **一、MVC模式详解** 1. **模型(Model)**:模型层负责处理业务逻辑和数据处理。在这个例子中,它可能包括对数据库的操作,...
这个“ssh的简单增删改查”示例旨在演示如何在Web应用中利用SSH框架进行基本的数据操作。在这个小例子中,我们将探讨SSH框架的核心概念以及如何通过Ajax技术实现异步的删除操作。 1. **Struts**:Struts是一个MVC...
这个"jqGrid增删改查例子"是一个实际应用示例,展示了如何结合Struts2框架和MySQL数据库实现一个完整的CRUD(创建、读取、更新、删除)功能的前端表格。 首先,让我们了解一下jqGrid的核心功能: 1. 数据展示:...
在"AJAX-dwr实现增删改查的示例代码"中,DWR被用来构建一个简单的CRUD(Create, Read, Update, Delete)应用程序。这个示例主要帮助开发者了解如何在实际项目中运用DWR来处理页面的交互和数据操作。由于此示例不依赖...
这个小例子展示了如何将这些技术整合在一起,实现一个基本的增删改查功能。下面我们将详细探讨这四个技术以及它们在实际应用中的工作原理。 **Struts1.2** 是一款基于MVC设计模式的Java Web框架,主要负责控制层的...
这个"**dwr增删改查**"的例子,正如标题和描述所提及,是一个非常基础且实用的教程,特别适合初学者了解和掌握DWR的基本用法,包括如何进行数据的添加、删除、修改和查询操作。 DWR的核心功能在于提供了一种方式,...
JQuery EasyUI 做的一个对书籍增删改查的例子”表明这是一个使用Struts2(SSH框架的一部分)、Spring和Hibernate(SSH框架的另外两个部分)结合JQuery EasyUI创建的Web应用程序示例,主要用于图书管理系统的CRUD...
在这个"html只在前端原生增删改查HTML.zip"压缩包中,我们看到的是一个使用纯HTML和JavaScript实现的前端数据管理示例。这个示例可能包含了以下几个关键知识点: 1. **HTML表单**:HTML中的`<form>`元素用于创建...
在SSH2整合的示例中,Ajax可能被用来实现页面无刷新的增删改查操作,提升用户体验。 7. **SQL**:SQL(Structured Query Language)是用于管理关系数据库的标准语言。在这个实例中,开发者会编写SQL语句来创建、...
在网页开发中,Ajax(Asynchronous JavaScript and XML)与jQuery的结合使用,极大地提升了用户体验,实现了页面无需刷新即可完成数据的增删改查操作。这个主题"一个页面实现Ajax效果的增删改查-JQuery"深入浅出地...
这个例子是一个在Eclipse环境中实现的增删改查(CRUD)应用,它结合了Spring、Spring MVC(Spring Web MVC)、MyBatis(原称SSM)以及前端的ExtJs框架。下面将详细介绍这些知识点: 1. **Spring**:Spring是Java...
在本案例中,Model组件将包含数据库连接代码,执行SQL语句以完成增删改查操作。 2. **View(视图)**:负责显示数据,通常为用户界面。在 MVC 架构中,视图不直接与模型交互,而是通过控制器获取更新后的数据,并...
在这个“ssh实现增删查改的例子”项目中,我们将探讨SSH框架如何协同工作,实现对MySQL数据库的数据操作。 首先,Struts2作为MVC框架,主要负责处理用户的HTTP请求。它通过Action类和ActionMapping将用户请求映射到...
总结来说,SSH+ExtJS实现的CRUD系统结合了Java后端的高效处理能力和JavaScript前端的用户体验优化,通过JSON进行数据交换,实现了对数据库中如“Student”这样的记录进行增、删、改、查的功能。这样的系统设计灵活且...