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

最新推荐文章于 2024-05-07 14:46:44 发布

原创最新推荐文章于 2024-05-07 14:46:44 发布 · 299 阅读

CC 4.0 BY-SA版权

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 = /^[\一-\龥]{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">
</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 = /^[\一-\龥]{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)

Java代码