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

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

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

<?xml version="1.0" encoding="gb2312"?><学生管理> <学生>           　<学号>97001</学号>　<姓名>王五</姓名>　<性别>男   </性别>　<籍贯>上海</籍贯> </学生> <学生>           　<学号>97002</学号>　<姓名>李四 </姓名>　<性别>男   </性别>　<籍贯>浙江 </籍贯> </学生> <学生>            　 <学号>97006    </学号>　 <姓名>张三 </姓名>　 <性别>男</性别>　 <籍贯>浙江</籍贯> </学生></学生管理>

时间： 2024-08-07 00:18:06

javascript操作xml(增删改查)例子代码的相关文章

java使用dom4j操作XML增删改查-超简洁

一.前言 1.使用工具:eclipse    环境:JDK-11 2.类说明:共四个类:Zen   |  Shan  |   Gai   |   Cha   (一个类只做一件事,简单明了) 3.引用jar包:dom4j-1.6.1.jar 4.反馈方式:邮箱 [email protected] 5.使用的源XML名为:Humen.xml  内容如下 二.源码 1.在源XML基础上添加新的 节点.属性.文本内容 /** * 作者:向家康 * 版权所有 禁止转发 */package 正式版.XML.

C#操作XML增删改查

XML文件是一种常用的文件格式,不管是B/S还是C/S都随处可见XML的身影.Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具.XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然XML占用的空间比二进制数据要占用更多的空间,但XML极其简单易于掌握和使用.微软也提供了一系列类库来倒帮助我们在应用程序中存储XML文件. “在程序中访问进而操作XML文件一般有两种模型,分别是使用DOM(文档对象模型)和流模型

Oracle简单操作语句(增删改查),和代码例子

//创建用户 :             create user c##名字 identified by 密码 ;        //命名规则 :             1 名字必须以字母开头,            2 长度不能超过30个字符(60字节),            3 不能使用oracle的保留字<            4 只能使用a-z,A-Z, 0-9,$,#,_,等... //切换当前用户 : connect 用户名/密码@网络服务器(orcl); //oracle数据

Linq To Xml操作XML增删改查

对XML文件的操作在平时项目中经常要运用到,比如用于存放一些配置相关的内容:本文将简单运用Linq TO Xml对XML进行操作,主要讲解对XML的创建.加载.增加.查询.修改以及删除:重点在于类XDocument.类XElement:本实例是在控制台程序运行,所以对加载的XML文件路径要注意,若XML文件不是代码自运创建时要设置其"复制到输出目录"-始终复制 1:首先看一下实例要加载的XML文件格式: <?xml version="1.0" encoding

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

深入浅出MongoDB（六）java操作mongodb增删改查

java操作mysql数据库的代码我们已经了如指掌了,增删改查,java对mongodb数据库也是类似的操作,先是数据库连接,再是进行操作. 首先我们进入进入admin数据库,然后建立自己的数据库testMongoDb,进入admin数据库后,就可以直接进入testMongoDb,因为用户可以进入系统的数据库,就是超级管理员,use testMongoDb后,为该数据库设置用户名和密码,db.addUser('root','root'),这样我们在程序中连该数据库,并实现增删改查,代码如下所示.

js操作indexedDB增删改查示例

js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var req = indexedDB.open("TestDB", 1); req.onupgradeneeded = function(e) { var db = req.result; // var store = db.createObjectStore("student"

Redis简单的数据操作（增删改查）

#Redis简单的数据操作(增删改查): 字符串类型 string 1. 存储: set key value 127.0.0.1:6379> set username zhangsan OK 2. 获取: get key 127.0.0.1:6379> get username "zhangsan" 以下同理: 127.0.0.1:6379> set age 23 OK 127.0.0.1:6379> get age "23" 127.0.0

javascript相关的增删改查以及this的理解

前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成只读属性: 3.点击编辑会自动编辑,input的属性会变成可读可写属性: 4.点击删除会出现弹框,确定该条是否会删除. 下面贴出代码,不要很激动哦,哈哈! 提前说一下,代码是基于jquery以及bootstrap的,以下有用到该框架的js以及css HTML代码: <table class="