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

最新推荐文章于 2020-09-26 10:38:42 发布

qingfengxia3

最新推荐文章于 2020-09-26 10:38:42 发布

阅读量227

点赞数

分类专栏： javascript资料文章标签： XML JavaScript IE 浏览器 CSS ViewUI

本文链接：https://blog.csdn.net/qingfengxia3/article/details/83284572

版权

javascript资料专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

关键字: javascript操作xml(增删改查)

自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!

包括了 stu.hta ( 是HTML应用程序 );
stu.xml
注意下面的HTML代码必须保存为后缀名为hta 否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!

文件 stu.hta 代码如下:

Java代码

<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= "显示学生信息" οnclick= "show();" >
<input id="que" type=button value= "精确查询" οnclick= "que();" >
<input id="add" type=button value= "新增" οnclick= "add();" >
<input id="can" type=button value= "取消" οnclick= "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" >
</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= "查询" οnclick= "query();" ></td>
<td><input id="mod" type=button value= "修改" οnclick= "mod();" ></td>
<td><input id="del" type=button value= "删除" οnclick= "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" οnkeydοwn= "javascript:ChckSubmit(event);" >
<input type="button" value= "查找" οnclick= "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

qingfengxia3

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript操作xml(增删改查)例子代码

javascript操作xml(增删改查)例子代码关键字: javascript操作xml(增删改查) 自己做了一个小东西，不是很好，但是对初学来说是一个不错的例子!包括了stu.hta(是HTML应用程序); stu.xml注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!!...
复制链接

扫一扫