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

2014-08-12来源：易贤网

包括了stu.hta(是HTML应用程序);

stu.xml

注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!

文件stu.hta代码如下:

代码如下:

<html>

<head>

<title> 数据岛的显示　</title>

#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>

<!--

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>

<br>

<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>姓名:

</td><td>性别:

</td><td>籍贯:

</td>

</tr>

</table>

</div>

<table>

</tr>

</table>

</div>

</center>

</div>

<!--

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>

<table DATASRC=#stu border=1 style="background-color:#a9eeef; Border-color

:red;" >

<caption><h2>学生信息管理</h2></caption>

<thead>　

</thead>　

<tr>　

<td>　　

</td>　　

<td>　　

</td>　　

<td>　　

</td>　　

<td>　　

</td>　

</tr>　

</table>

</div>

</center>

</body>

</html>

xml文件如下(stu.xml)

代码如下:

<?xml version="1.0" encoding="gb2312"?>

<学生管理>

<学生>

　<学号>97001</学号>

　<姓名>王五</姓名>

　<性别>男 </性别>

　<籍贯>上海</籍贯>

</学生>

<学生>

　<学号>97002</学号>

　<姓名>李四 </姓名>

　<性别>男 </性别>

　<籍贯>浙江 </籍贯>

</学生>

<学生>

　 <学号>97006 </学号>

　 <姓名>张三 </姓名>

　 <性别>男</性别>

　 <籍贯>浙江</籍贯>

</学生>

</学生管理>

更多信息请查看IT技术专栏

2025公考·省考培训课程试听预约报名

报班类型
姓名
手机号
验证码

推荐信息

Bottle框架中的装饰器类和描述符应用详解

Python探索之SocketServer详解

Python探索之实现一个简单的HTTP服务器

python探索之BaseHTTPServer-实现Web服务器介绍

Android开发自定义TextView省略号样式的方法

MySQL 清除表空间碎片的实例详解

Ubuntu下MySQL安装及配置远程登录教程

Python 2.x如何设置命令执行的超时时间实例

windows 64位下redis安装教程

Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果

浅谈Node Inspector 代理实现

java web开发之购物车功能实现示例代码

Android开发中GridView用法示例

Django ORM框架的定时任务如何使用详解

SpringMail使用过程中的报错解决办法

Android 使用自定义RecyclerView控件实现Gallery效果