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

页面导航:首页 > 脚本专栏 > hta > javascript操作xml(增删改查)例子代码hta版

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

来源:互联网 作者:脚本宝典 时间:2015-07-20 18:43 【

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

//已经查找一遍,没有找到符合条件的结果 
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 </学号> 
  <姓名>张三 </姓名> 
  <性别>男</性别> 
  <籍贯>浙江</籍贯> 
</学生> 
</学生管理> 


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<